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Sobre este libro... 

■ Los contenidos de este libro estan bajo una licencia Creative Commons Reconocimiento - 
No Comercial - Sin Obra Derivada 3.0 [http://creativecommons.org/licenses/by-nc-nd/ 
3.0/deed.es) 

■ Esta version impress se creo el 2 de enero de 2009 y todavia esta incompleta. La 

version mas actualizada de los contenidos de este libro se puede encontrar en 
http: / / www.librosweb.es / css_avanzado 

■ Si quieres aportar sugerencias, comentarios, criticas o informar sobre errores, puedes 
enviarnos un mensaje a contacto@librosweb.es 
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Capftulo 1. Tecnicas imprescindibles 


Capftulo 1. Tecnicas imprescindibles 

El estandar CSS 2.1 incluye mas de 100 propiedades de todo tipo para disenar el aspecto de las 
paginas HTML. No obstante, los disenos web mas actuales muestran recursos graficos que no se 
pueden realizar con CSS, como sombras, transparencias, esquinas redondeadas y tipografi'a 
avanzada. Por ese motivo, es preciso que los disenadores web profesionales conozcan las 
tecnicas imprescindibles para crear disenos web avanzados. 

En las proximas secciones se muestran las siguientes tecnicas imprescindibles: 

■ Propiedades shorthand para crear hojas de estilos concisas. 

■ La propiedad has Layout de Internet Explorer, imprescindible para solucionar muchos 
errores de ese navegador. 

■ Limpiarfloats, para trabajar correctamente con los elementos posicionados de forma 
flotante. 

■ Como crear elementos de la misma altura, imprescindible para el layout o estructura de las 
paginas. 

■ Sombras, transparencias y esquinas redondeadas, que no se pueden crear con CSS 2.1. 

■ Sustitucion de texto por imagenes y por Flash, para utilizar cualquier tipografi'a en el 
diseno de las paginas. 

■ Rollovers y sprites CSS para mejorar el tiempo de respuesta de las paginas. 

■ Tecnicas para trabajar con el texto y la tipografi'a. 

1.1. Propiedades shorthand 

Algunas propiedades del estandar CSS 2.1 son especiales, ya que permiten establecer 
simultaneamente el valor de varias propiedades diferentes. Este tipo de propiedades se 
denominan "propiedades shorthand" y todos los disenadores web profesionales las utilizan. 


La gran ventaja de las propiedades shorthand es que permiten crear hojas de estilos mucho mas 
concisas y por tanto, mucho mas faciles de leer. A continuation se incluye a modo de referencia 
la definition formal de las seis propiedades shorthand disponibles en el estandar CSS 2.1. 


font 

Tipograffa 

Valores 

( ( <font-style> || <font-variant> || <font-weight> )? 

<font-size> ( / <line-height> )? <font-family> ) | caption | 
icon | menu | message-box | small-caption | status-bar | inherit 

Se aplica a 

Todos los elementos 

Valor inicial 


Description 

Permite indicar de forma directa todas las propiedades de la tipograffa de un texto 
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margin 

Margen 

Valores 

( <medida> | <porcentaje> | auto ) {1, 4} | inherit 

Se aplica a 

Todos los elementos salvo algunos casos especiales de elementos mostrados como 
tablas 

Valor inicial 


Descripcion 

Establece de forma directa todos los margenes de un elemento 


padding 

Relleno 

Valores 

( <medida> | <porcentaje> ){1, 4} | inherit 

Se aplica a 

Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y 
grupos de pies de tabla 

Valor inicial 


Descripcion 

Establece de forma directa todos los rellenos de los elementos 


border 

Estilo completo de todos los bordes 

Valores 

( <border-width> || <border-color> || <border-style> ) | inherit 

Se aplica a 

Todos los elementos 

Valor inicial 


Descripcion 

Establece el estilo completo de todos los bordes de los elementos 


background 

Fondo de un elemento 

Valores 

( <background-color> || <background-image> || 

<background-repeat> || <background-attachment> || 
<background-position> ) | inherit 

Se aplica a 

Todos los elementos 

Valor inicial 


Descripcion 

Establece todas las propiedades del fondo de un elemento 


list-style 

Estilo de una lista 

Valores 

( <list-style-type> || <list-style-position> || 

<list-style-image> ) | inherit 

Se aplica a 

Elementos de una lista 

Valor inicial 


Descripcion 

Propiedad que permite establecer de forma simultanea todas las opciones de una lista 


Si se considera la siguiente hoja de estilos: 
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P { 

font-style: normal; 
font-variant: small-caps; 
font-weight: bold; 
font-size: 1.5em; 
line-height: 1.5; 
font-family: Arial, sans-serif; 

} 

div { 

margin-top: 5px; 
margin-right: 10px; 
margin-bottom: 5px; 
margin-left: 10px; 
padding-top: 3px; 
padding-right: 5px; 
padding-bottom: 10px; 
padding-left: 7px; 

} 

hi { 

background-color: #FFFFFF; 
background-image: url("imagenes/icono.png"); 
background-repeat: no-repeat; 
background-position: 10px 5px; 

} 

Utilizando las propiedades shorthand es posible convertir las 24 li'neas que ocupa la hoja de 
estilos anterior en solo 10 li'neas, manteniendo los mismos estilos: 

P { 

font: normal small-caps bold 1.5em/1.5 Arial, sans-serif; 

} 

div { 

margin: 5px 10px; 
padding: 3px 5px 10px 7px; 

} 

hi { 

background: #FFF url("imagenes/icono.png") no-repeat 10px 5px; 

} 


1.2. La propiedad hasLayout de Internet Explorer 

El navegador Internet Explorer 7 y sus versiones anteriores incluyen decenas de errores 
relacionados con CSS. La mayoria de esos errores se pueden solucionar con trucos y tecnicas que 
aprovechan otros errores o caracteristicas del navegador. Ademas, muchos errores se 
solucionan gracias a la propiedad hasLayout de Internet Explorer. 

En efecto, muchas soluciones de los errores de Internet Explorer consisten en "forzar a un 
elemento a que tenga un layout". El motivo es que para mostrar los elementos de una pagina, el 
navegador Internet Explorer divide a todos los elementos en dos grupos: 

■ Los elementos cuyo tamano y posicion dependen de su elemento contenedor. 

■ Los elementos que establecen su propio tamano y posicion. 
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La mayori'a de elementos de una pagina son del primer tipo, ya que sus elementos contenedores 
(normalmente el elemento <body>) determinan su tamano y position. Los elementos del 
segundo tipo son los que Internet Explorer considera que tienen un layout. 

Los elementos HTML que por defecto tienen un layout en Internet Explorer son: 

■ <html>, <body> 

■ <table>, <tr>, <th>, <td> 

■ <img> 

■ <hr> 

■ <input>, <button>, <select>, <textarea>, <fieldset>, <legend> 

■ <iframe>, <embed>, <object>, <applet> 

■ <marquee> 

No obstante, algunas propiedades CSS provocan que el elemento tenga un layout y por tanto, 
activan la propiedad hasLayout. La siguiente tabla muestra todas las propiedades CSS y valores 
que hacen que un elemento tenga un layout : 


Propiedad 

Valores que activan la propiedad hasLayout 

Comentarios 

position 

absolute, fixed 

fixed solo en Internet Explorer 7 

float 

left, right 


display 

inline-block 


width 

Cualquier valor que no sea auto 


min-width 

Cualquier valor 

Solo en Internet Explorer 7 

max-width 

Cualquier valor 

Solo en Internet Explorer 7 

height 

Cualquier valor que no sea auto 


min-height 

Cualquier valor 

Solo en Internet Explorer 7 

max-height 

Cualquier valor 

Solo en Internet Explorer 7 

zoom 

Cualquier valor que no sea normal 


writing-mode 

tb-rl 


overflow 

hidden, scroll, auto 

Solo en Internet Explorer 7 


Las propiedades zoom y writing-mode no se definen en ningun estandar de CSS porque son 
propietarias del navegador Internet Explorer. Si se utilizan estas dos propiedades, la hoja de 
estilos no pasa satisfactoriamente el proceso de validation. 

Para quitar el layout a un elemento, es necesario establecer el valor por defecto de todas las 
propiedades de la tabla anterior que hayan sido modificadas: 

■ width: auto, height: auto 

■ max-width: auto,min-width: auto 
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■ position: static 

■ float: none 

■ overflow: visible 

■ zoom: normal 

■ writing-mode: lr-tb 

Utilizando alguna de las propiedades CSS anteriores se han ideado numerosas soluciones para 
forzar a que un elemento tenga un layout. Uno de los trucos mas conocidos desde hace muchos 
anos es el famoso Holly hack (http://www.communitymx.com/content/ 
article.cfm?page=2&cid=C37E0) que soluciona un problema con un elemento posicionado de 
forma flotante aplicando la siguiente regia: 

.selector { 
height: 1%; 

} 

En el navegador Internet Explorer 6 se puede utilizar el truco del guion bajo y la propiedad 
height para forzar a un elemento a que tenga layout : 

.selector { 

_height: 1%; 

} 

En Internet Explorer 7 se puede utilizar la propiedad min-height utilizando cualquier valor, 
incluso el 0: 

.selector { 
min-height: 0; 

} 

Otra propiedad muy utilizada en Internet Explorer 7 es zoom, aunque no es una propiedad 
estandar de CSS: 

.selector { 
zoom: lj 

} 

En las proximas secciones se presentan algunas tecnicas que requieren forzar a que un elemento 
tenga layout en Internet Explorer. Si quieres acceder a decenas de tecnicas que hacen uso de la 
propiedad hasLayout, puedes consultar el articulo On having layout (http://www.satzansatz.de/ 
cssd/onhavinglayout.html) . Microsoft tambien ha publicado un articulo llamado HasLayout 
Overview (http://msdn.microsoft.com/en-us/library/bb250481(VS.85).aspx] que explica la 
propiedad hasLayout y sus implicaciones en el diseno de sitios web. 

1.3. Limpiar floats 

La principal caracteristica de los elementos posicionados de forma flotante mediante la 
propiedad float es que desaparecen del flujo normal del documento. De esta forma, es posible 
que algunos o todos los elementos flotantes se salgan de su elemento contenedor. 
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La siguiente imagen muestra un elemento contenedor que encierra a dos elementos de texto. 
Como los elementos interiores estan posicionados de forma flotante y el elemento contenedor 
no dispone de mas contenidos, el resultado es el siguiente: 



Figura 1.1. Los elementos posicionados de forma flotante se salen de su elemento contenedor 
El codigo HTML y CSS del ejemplo anterior se muestra a continuation: 

<div id="contenedor"> 

<div id="izquierda">Lorem ipsum dolor sit arnet, consectetuer adipiscing elit. Duis 
molestie turpis vitae ante.</div> 

<div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla 
bibendum mi non lacus.</div> 

</div> 

#contenedor { 

border: thick solid #000; 

} 

#izquierda { 
float: left; 
width: 40%; 

} 

#derecha { 
float: right; 
width: 40%; 

} 

La solution tradicional de este problema consiste en anadir un elemento invisible despues de 
todos los elementos posicionados de forma flotante para forzar a que el elemento contenedor 
tenga la altura suficiente. Los elementos invisibles mas utilizados son <div>, <br> y <p>. 

De esta forma, si se anade un elemento <div> invisible con la propiedad clear de CSS en el 
ejemplo anterior: 

<div id="contenedor"> 

<div id="izquierda">Lorem ipsum dolor sit arnet, consectetuer adipiscing elit. Duis 
molestie turpis vitae ante.</div> 

<div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla 
bibendum mi non lacus.</div> 

<div style="clear: both"x/div> 

</div> 
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Ahora el elemento contenedor se visualiza correctamente porque encierra a todos sus 
elementos: 



Figura 1.2. Solucion tradicional al problema de los elementos posicionados de forma flotante 

La tecnica de corregir los problemas ocasionados por los elementos posicionados de forma 
flotante se suele denominar "limpiar los float". 

Aunque anadir un elemento invisible corrige correctamente el problema, se trata de una 
solucion poco elegante e incorrecta desde el punto de vista semantico. No tiene ningun sentido 
anadir un elemento vacio en el codigo HTML, sobre todo si ese elemento se utiliza 
exclusivamente para corregir el aspecto de los contenidos. 

Afortunadamente, existe una solucion alternativa para limpiar los float que no obliga a anadir 
nuevos elementos HTML y que ademas es elegante y muy sencilla. La solucion consiste en 
utilizar la propiedad overflow de CSS sobre el elemento contenedor. El autor de la solucion es el 
disenador Paul O'Brien (http://pmob.co.uk/) y se publico por primera vez en el articulo Simple 
Clearing of Floats (http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/) . 

Si se modifica el codigo CSS anterior y se incluye la siguiente regia: 

#contenedor { 

border: thick solid # 000 ; 

overflow: hidden; 

} 

Ahora, el contenedor encierra correctamente a los dos elementos <div> interiores y no es 
necesario anadir ningun elemento adicional en el codigo HTML. Ademas del valor hidden, 
tambien es posible utilizar el valor auto obteniendo el mismo resultado. 

Esta solucion fiinciona correctamente en todas las versiones recientes de los navegadores, 
incluyendo Internet Explorer 7 y 8. No obstante, en las versiones anteriores de Internet Explorer 
es necesario anadir cualquier propiedad CSS que obligue al navegador a considerar que el 
elemento contenedor ocupa sitio en la pagina. 

Tecnicamente, esta estrategia se conoce como forzar a que Internet Explorer active la propiedad 
hasLayout sobre el elemento. A continuacion se muestran algunas tecnicas sencillas para 
conseguirlo: 
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/* Funciona correctamente con cuaLquier navegador */ 
#contenedor { 

border: thick solid #000; 

overflow: hidden; 
width: 100%; 

} 


/* Funciona correctamente con cuaLquier navegador */ 
#contenedor { 

border: thick solid #000; 

overflow: hidden; 
height: 1%; 


/* La propiedad zoom no es parte deL estandar CSSj por Lo 
que esta hoja de estiLos no vaLidaria */ 

#contenedor { 

border: thick solid #000; 

overflow: hidden; 
zoom: 1; 

} 


/* EL truco deL guion bajo deLante de Las propiedades CSS no 

Lo interpreta correctamente La version 7 de Internet ExpLorer */ 
#contenedor { 

border: thick solid #000; 

overflow: hidden; 

_height: 1%; 


De todas las soluciones anteriores, la mas utilizada es la que establece la propiedad height: 1%, 
ya que normalmente es la que menos afecta al aspecto del elemento contenedor. Considerando 
todo lo anterior, a continuation se muestra la solution definitiva para limpiar los floats, que es 
compatible con todos los navegadores y que hace que la hoja de estilos sea valida: 

#contenedor { 

border: thick solid #000; 

overflow: hidden; 
height: 1%; 

} 

#izquierda { 
float: left; 
width: 40%; 

} 

#derecha { 
float: right; 
width: 40%; 

} 
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1.4. Elementos de la misma altura 

Hasta hace unos anos, la estructura de las paginas web complejas se creaba mediante tablas 
HTML. Aunque esta solucion presenta muchos inconvenientes, su principal ventaja es que todas 
las columnas que forman la pagina son de la misma altura. 

Normalmente, cuando se crea la estructura de una pagina compleja, se desea que todas las 
columnas que la forman tengan la misma altura. De hecho, cuando algunas o todas las columnas 
tienen imagenes o colores de fondo, esta caracteristica es imprescindible para obtener un diseno 
correcto. 

Sin embargo, como el contenido de cada columna suele ser variable, no es posible determinar la 
altura de la columna mas alta y por tanto, no es posible hacer que todas las columnas tengan la 
misma altura directamente con la propiedad height. 

Cuando se utiliza una tabla para crear la estructura de la pagina, este problema no existe porque 
cada columna de la estructura se corresponde con una celda de datos de la tabla. Sin embargo, 
cuando se disena la estructura de la pagina utilizando solo CSS, el problema no es tan facil de 
solucionar. Afortunadamente, existen varias soluciones para asegurar que dos elementos tengan 
la misma altura. 

La primera solucion es la mas sencilla y la publico el disenador Alex Robinson en su articulo 
Equal Height Columns - revisited (http://www.positioniseverything.net/articles/onetruelayout/ 
equalheight] . El truco consiste en anadir un espacio de relleno inferior (padding-bottom) muy 
grande a todas las columnas y despues anadirles un margen inferior negativo (margin-bottom) 
del mismo tamano. 

#contenedor { 

overflow: hidden; 

> 

#columnal, #columna2, #columna3 { 
padding-bottom: 32767px; 
margin-bottom: -32767px; 

} 

El valor utilizado en el espacio de relleno y en el margen inferior de las columnas debe ser tan 
grande como la altura esperada para la columna mas alta. Para evitar quedarse corto, se 
recomienda utilizar valores a partir de 10.000 pixeles. 

Los dos principals problemas que presenta esta solucion son los siguientes: 

■ Se pueden producir errores al imprimir la pagina con el navegador Internet Explorer. 

■ Si se utilizan enlaces de tipo ancla en cualquier columna, al pulsar sobre el enlace las 
columnas se desplazan de forma ascendente y desaparecen de la pagina. 

Otra solucion al problema de los elementos de la misma altura es la que presento el disenador 
Dan Cederholm en su celebre articulo Faux Columns (http://www.alistapart.com/articles/ 
fauxcolumns/) . Si la solucion anterior consitia en engahar al navegador, esta segunda solucion 
se basa en engahar al ojo del usuario. 
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La solucion de las columnas falsas consiste en establecer una imagen de fondo repetida 
verticalmente en el elemento contenedor. Como el contenedor es tan alto como la columna mas 
alta, su imagen de fondo da la sensacion de que todas las columnas son de la misma altura. 



Figura 1.3. Las columnas parecen de la misma altura porque el elemento contenedor muestra una 
imagen de fondo repetida verticalmente 


El principal inconveniente de esta tecnica es que solo se puede emplear cuando la estructura de 
la pagina es de anchura fija, es decir, cuando su diseno no es liquido y no se adapta a la anchura 
de la ventana del navegador. 

Si el fondo de las columnas es simplemente un color y no una imagen, se puede utilizar una 
solucion alternativa planteada por el disenador Douglas Livingstone en su tecnica Bordered 
Colors (http://www.redmelon.net/tstme/3cols2/] y que se basa en el uso de las propiedades 
border-left y border-right sobre la columna central de la estructura de la pagina. Una version 
alternativa y mejorada de la tecnica original se puede encontrar en Ordered Borders Layout 
(http://www.positioniseverything.net/ordered-borders-center.html). 

Las dos soluciones planteadas hasta el momento consisten en trucos para enganar a los 
navegadores y a los usuarios. A continuation se presenta la unica solucion tecnicamente correcta 
para forzar a que dos elementos muestren la misma altura. 

La solucion fue propuesta por el disenador Roger Johansson en su articulo Equal height boxes 
with CSS (http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/) y 
se basa en el uso avanzado de la propiedad display de CSS. 

En primer lugar, es necesario anadir un elemento adicional (<div id="contenidos">) en el 
codigo HTML de la pagina: 

<div id="contenedor"> 

<div id="contenidos"> 

<div id="columnal"x/div> 

<div id="columna2"x/div> 

<div id="columna3"x/div> 

</div> 

</div> 
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A continuation, se utiliza la propiedad display de CSS para mostrar los elementos <div> 
anteriores como si fueran celdas de una tabla de datos: 

#contenedor { 
display: table; 

} 

#contenidos { 

display: table-row; 

} 

#columnal, #columna2, #columna3 { 
display: table-cell; 

} 

Gracias a la propiedad display de CSS, cualquier elemento se puede comportar como una tabla, 
una fila de tabla o una celda de tabla, independientemente del tipo de elemento que se trate. 

De esta forma, los elementos <div> que forman las columnas de la pagina en realidad se 
comportan como celdas de tabla, lo que permite que el navegador las muestre con la misma 
altura. 

El unico inconveniente de la solution anterior es que el navegador Internet Explorer 7 y sus 
versiones anteriores no son capaces de manejar los valores mas avanzados de la propiedad 
display, por lo que en esos navegadores la pagina no muestra correctamente su estructura. 

1.5. Sombras 

Una de las carencias del estandar CSS 2.1 mas demandadas por los disenadores es la posibilidad 
de mostrar sombras tipo "drop shadow" sobre cualquier elemento de la pagina. Por este motivo, 
la futura version CSS 3 incluira una propiedad llamada box-shadow para crear este tipo de 
sombras. 

A continuation se muestra la regia CSS 3 necesaria para crear una sombra gris muy difuminada y 
que se visualice en la esquina inferior derecha de un elemento: 

.elemento { 

box-shadow: 2px 2px 5px #999; 

} 

Desafortunadamente, esta propiedad solo esta disponible en los navegadores que mas se 
preocupan por los estandares. El navegador Safari 3 incluye la propiedad con el nombre 
-webkit-box-shadowy Firefox 3.1 la incluye con el nombre -moz-box-shadow. 

La sintaxis completa de la propiedad box-shadow es muy compleja y se define en el borrador de 
trabajo del modulo de fondos y bordes de CSS3 (http://dev.w3.org/csswg/css3-background/ 
#the-box-shadow). A continuation se muestra su sintaxis simplificada habitual: 

| box-shadow: <medida> <medida> <medida>? <medida>? <color> 
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■ La primera medida es obligatoria e indica el desplazamiento horizontal de la sombra. Si el 
valor es positivo, la sombra se desplaza hacia la derecha y si es negativo, se desplaza hacia 
la izquierda. 

■ La segunda medida tambien es obligatoria e indica el desplazamiento vertical de la 
sombra. Si el valor es positivo, la sombra se desplaza hacia abajo y si es negativo, se 
desplaza hacia arriba. 

■ La tercera medida es opcional e indica el radio utilizado para difuminar la sombra. Cuanto 
mas grande sea su valor, mas borrosa aparece la sombra. Si se utiliza el valor 0, la sombra 
se muestra como un color solido. 

■ La cuarta medida tambien es opcional e indica el radio con el que se expande la sombra. Si 
se establece un valor positivo, la sombra se expande en todas direcciones. Si se utiliza un 
valor negativo, la sombra se comprime. 

■ El color indicado es directamente el color de la sombra que se muestra. 

La siguiente regia CSS muestra una sombra en los navegadores Firefox y Safari: 

.elemento { 

-webkit-box-shadow: 2px 2px 5px #999j 
-moz-box-shadow: 2px 2px 5px #999j 

} 

Por su parte, el navegador Internet Explorer dispone de su propio mecanismo para crear 
sombras. La solution se basa en el uso de los filtros, un mecanismo que no forma parte del 
estandar de CSS y que permiten aplicar operaciones complejas a los elementos de la pagina. 
Entre los filtros de Internet Explorer (http://msdn.microsoft.com/en-us/library/ 
ms532853(VS.85].aspx] , se encuentra el filtro shadow (http://msdn.microsoft.com/en-us/ 
library/ms533086(VS.85).aspx), que permite mostrar una sombra en un elemento de la pagina. 

Las opciones del filtro shadow son mucho mas limitadas que las de la propiedad box-shadow. Su 
sintaxis es la habitual de los filtros de Internet Explorer y las opciones son: 

* color, establecido mediante el formato hexadecimal (ejemplo: #CC0000). 

■ direction, direction hacia la que se desplaza la sombra. Su valor se indica en grados y solo 
se permiten los valores 0, 45, 90,135,180, 225, 270 y 315. 

■ strength, distancia en pixeles hasta la que se extiende la sombra. 

A continuation se modifica la regia CSS anterior para incluir el filtro de Internet Explorer que 
muestra una sombra similar: 

.elemento { 

-webkit-box-shadow: 2px 2px 5px #999j 
-moz-box-shadow: 2px 2px 5px #999j 

filter: shadow(color=#999999, direction=135j strength=2); 

} 

Lamentablemente, hasta que todos los navegadores mas utilizados no incluyan la propiedad 
box-shadow, la unica forma de mostrar una sombra sobre un elemento de la pagina consiste en 
utilizar imagenes que simulan una sombra. 
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A continuacion se detallan los pasos necesarios para mostrar una sombra sencilla sobre una 
imagen: 

1. Se crea una imagen del mismo tamano que la imagen original y cuyo aspecto sea el de la 
sombra que se quiere mostrar. 

2. Se anade un espacio de relleno a la imagen original en la posicion en la que se quiere 
mostrar la sombra. Si por ejemplo se quiere mostrar una sombra en la esquina inferior 
derecha, se anade padding-right y padding-bottom. 

3. Utilizando la propiedad background, se anade la imagen de la sombra como imagen de 
fondo de la imagen original. La imagen de fondo se coloca en la posicion en la que se 
quiere mostrar la sombra. En el caso de la sombra inferior derecha, la posicion de la 
imagen de fondo es bottom right. 

La siguiente imagen muestra el resultado final y las imagenes utilizadas en el proceso: 





Sombra 


Imagen con sombra 


Figura 1.4. Aplicando una sombra a una imagen 
El codigo CSS necesario para conseguir este efecto se muestra a continuacion: 

img { 

background: url("imagenes/sombra.png") no-repeat bottom right; 
padding-right: 10px; 
padding-bottom: 10px; 

} 

El principal inconveniente de esta tecnica sencilla es que se deben crear tantas imagenes de 
sombra como tamanos diferentes de imagenes haya en el sitio web. La solution a este problema 
consiste en crear una imagen de sombra muy grande y aplicarla a todas las imagenes. Esta nueva 
sombra debe tener un tamano al menos tan grande como la imagen mas grande que se vaya a 
utilizar. 

El problema de utilizar una imagen de sombra muy grande es que los hordes de la sombra no 
quedan tan bien como cuando se utiliza una imagen de sombra del mismo tamano que la imagen 
original: 
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Imagen con sombra normal 



Imagen con sombra grande 


Figura 1.5. Las imageries de sombra muy grande producen bordes mas feos 

La solucion completa para crear sombras de cualquier tamano y con bordes correctos implica el 
uso de mas imagenes. Los siguientes recursos muestran como crear ese tipo de sombras: 

■ Shadowed Image (http://www.cssdesignpatterns.com/Chapter%2014%20-%20IMAGES/ 
Shadowed%20Image/example.html] : utilizatres imagenes y tres elementos <div> para 
cada imagen. 

■ CSS Drop Shadows II: Fuzzy Shadows [http://www.alistapart.com/articles/cssdrop2/] : 
utiliza dos imagenes y dos elementos <div> para cada imagen. 

■ My contribution to the CSS shadow kerfuffle (http://theshapeofdays.com/2005/ll/29/ 
my-contribution-to-the-css-shadow-kerfuffle.html] : el resultado es identico al obtenido 
mediante el drop shadow de Photoshop, pero requiere cinco imagenes y cinco elementos 
<div> para cada imagen. 

Si se quiere mostrar una sombra sobre elementos que no sea imagenes, la solucion consiste en 
encerrar los contenidos con dos elementos <div> y aplicar la imagen de sombra sobre el primero 
de ellos: 

#sombra { 

background: url("imagenes/sombra_grande.png") no-repeat 100% 100%j 
padding-right: 15px; 
padding-bottom: 15px; 
width: 200pxj 

} 

#sombra div { 

background: #FFF; 
width: 200pxj 

} 

<div id="sombra"> 

<div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut diam metus, 
venenatis ullamcorper, consequat sit amet, volutpat at, nulla. Nulla sollicitudin 
metus.</div> 

</div> 

Las soluciones basadas en imagenes tienen la ventaja de que funcionan correctamente en 
cualquier navegador. Sin embargo, complican innecesariamente el codigo HTML de la pagina y 
tienen limitaciones como la de tener que crear una nueva imagen cada vez que se quiere cambiar 
el color de la sombra. 
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1.6. Transparencias 

El estandar de CSS 2.1 no incluye ninguna propiedad para controlar la opacidad de los elementos 
de la pagina. Sin embargo, la futura version CSS 3 incluye una propiedad llamada opacity, 
definida en el modulo de colores de CSS 3 (http://www.w3.org/TR/css3-color/] y que permite 
incluir transparencias en el diseno de la pagina. 

A pesar de que falta mucho tiempo hasta que se publique la version defmitiva del estandar CSS 3, 
los navegadores que mas se esfuerzan en cumplir los estandares (Firefox, Safari y Opera) ya 
incluyen la propiedad opacity en sus ultimas versiones. 

El valor de la propiedad opacity se establece mediante un numero decimal comprendido entre 
0.0 y 1.0. La interpretation del valor numerico es tal que el valor 0.0 es la maxima 
transparencia (el elemento es invisible) y el valor 1.0 se corresponde con la maxima opacidad 
(el elemento es completamente visible). De esta forma, el valor 0.5 corresponde a un elemento 
semitransparente y asi sucesivamente. 

En el siguiente ejemplo, se establece la propiedad opacity con un valor de 0.5 para conseguir 
una transparencia del 50% sobre dos de los elementos <div>: 

#segundo, #tercero { 
opacity: 0.5; 

} 

#primero { 

background-color: blue; 

} 

#segundo { 

background-color: red; 

} 

#tercero { 

background-color: green; 

} 

Si se visualiza el ejemplo anterior en el navegador Firefox, Safari u Opera, los elementos <div> 
rojo y verde aparecen semitransparentes, tal y como se muestra en la siguiente imagen: 
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Figura 1.6. Creando elementos semitransparentes con la propiedad opacity 

Desafortunadamente, la solucion anterior no funciona en el navegador Internet Explorer 7 y sus 
versiones anteriores porque no soportan la propiedad opacity. No obstante, el navegador 
Internet Explorer incluye un mecanismo llamado filtros, que no forman parte de ningun 
estandar de CSS pero que permiten solucionar esta limitation. 

Los filtros permiten aplicar operaciones complejas a los elementos de la pagina. Los filtros de 
Internet Explorer (http://msdn.microsoft.com/en-us/library/ms532853(VS.85).aspx] se 
dividen en estaticos y de transition. Los filtros estaticos (http://msdn.microsoft.com/en-us/ 
library/ms673539(VS.85).aspx) se utilizan basicamente para crear efectos graficos sobre los 
elementos, normalmente imagenes. Entre los filtros estaticos se encuentra el filtro alpha 
(http://msdn.microsoft.com/en-us/library/ms532967.aspx], que permite controlar la opacidad 
de un elemento de la pagina. 

La sintaxis completa del filtro alpha es muy compleja porque sus posibilidades son numerosas. 
No obstante, la sintaxis necesaria para establecer solamente el nivel de transparencia de un 
elemento es muy sencilla: 

#segundOj #tercero { 

filter: alpha(opacity=50); 

} 

El valor de la option opacity del filtro alpha se establece mediante un numero entero 
comprendido entre 0 (el elemento es invisible] y 100 (el elemento es completamente opaco]. El 
valor 50 del ejemplo anterior hace que el elemento sea semitransparente. 

A continuation se muestra la solucion compatible con todos los navegadores para que un 
elemento de la pagina sea semitransparente: 

selector { 
opacity: 0.5; 

filter: alpha(opacity=50); 

} 

Por ultimo, recuerda que la propiedad filter es propietaria de Internet Explorer y no forma 
parte de ningun estandar de CSS, por lo que regia anterior no pasa satisfactoriamente el proceso 
de validation CSS. 
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1.7. Sustitucion de texto por imageries 

La limitacion mas frustrante para los disenadores web que cuidan especialmente la tipografi'a de 
sus paginas es la imposibilidad de utilizar cualquier tipo de letra para mostrar los contenidos de 
texto. Como se sabe, las fuentes que utiliza una pagina deben estar instaladas en el ordenador o 
dispositivo del usuario para que el navegador pueda mostrarlas. 

Por lo tanto, si el disenador utiliza en la pagina una fuente especial poco comun entre los 
usuarios normales, el navegador no encuentra esa fuente y la sustituye por una fuente por 
defecto. El resultado es que la pagina que ve el usuario y la que ve el disenador se diferencian 
completamente en su tipografi'a. 

La consecuencia directa de esta limitacion es que todos los disenadores se limitan a utilizar las 
pocas fuentes que tienen casi todos los usuarios del mundo: 

■ Sistemas operativos tipo Windows: Arial, Verdana, Tahoma, Courier New, Times New 
Roman, Georgia. Tambien esta disponible una lista con todas las fuentes que incluye por 
defecto cada version de Windows (http://www.ampsoft.net/webdesign-l/ 
windows-fonts-by-version.html). 

■ Sistemas operativos tipo Mac: Arial, Helvetica, Verdana, Monaco, Times. 

■ Sitemas operativos tipo Linux: incluyen decenas de fuentes, muchas de ellas versiones 
libres de las fuentes comerciales. Tambien es posible instalar las fuentes mas populares de 
Windows mediante el paquete Core Font (http://corefonts.sourceforge.net/). 

Debido a la presencia mayoritaria de los sistemas operativos Windows y la disponibilidad de 
muchas de sus fuentes en otros sistemas operativos, la mayoria de disenadores utilizan 
exclusivamente las fuentes mas populares de Windows. 

Afortunadamente, existen varias tecnicas que permiten utilizar cualquier tipo de letra en el 
diseno de una pagina con la seguridad de que todos los usuarios la veran correctamente. 

1.7.1. La directiva @font-face 

La unica solution tecnicamente correcta desde el punto de vista de CSS es el uso de la directiva 
@font-face. Esta directiva se definio en el estandar CSS 2, pero desaparecio en el estandar CSS 
2.1 que utilizan todos los navegadores de hoy en dia. La futura version de CSS 3 volvera a incluir 
la directiva @font-face en el modulo llamado Web Fonts (http://www.w3.org/TR/ 
css3-webfonts/). 

La directiva @font-face permite describir las fuentes que utiliza una pagina web. Como parte de 
la description se puede indicar la direction o URL desde la que el navegador se puede descargar 
la fuente utilizada si el usuario no dispone de ella. A continuation se muestra un ejemplo de uso 
de la directiva @font-f ace: 

§font-face { 

font-family: "Fuente muy rara"; 

src: url("http://www.ejemplo.com/fuentes/fuente_muy_rara.ttf")j 

} 
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hi { 

font-family: "Fuente muy rara", sans-serif; 

} 

La directiva @font-face tambien permite definir otras propiedades de la fuente, como su 
formato, grosor y estilo. A continuation se muestran otros ejemplos: 

§font-face { 

font-family: Fontinsans; 

src: url("fonts/Fontin_Sans_SC_45b.otf") format("opentype"); 
font-weight: bold; 
font-style: italic; 

} 

§font-face { 

font-family: Tagesschrift; 

src: url("fonts/YanoneTagesschrift.ttf") format("truetype"); 

} 

Los ejemplos anteriores han sido extrai'dos de la pagina 10 Great Free Fonts for @font-face 
embedding (http://opentype.info/demo/webfontdemo.html) . Para ver el efecto de la directiva 
@font-face, debes acceder a esa pagina utilizando un navegador como Safari. 

1.7.2. Soluciones FIR 

Las siglas FIR [Fahrner Image Replacement) abarcan decenas de tecnicas similares que tratan de 
resolver el problema de utilizar cualquier tipo de letra en una pagina web. El proposito de estas 
tecnicas es sustituir el texto normal por una imagen que contenga el mismo texto escrito con la 
tipografi'a deseada. La primera tecnica se presento en el arti'culo Using Background-Image to 
Replace Text (http://www.stopdesign.com/articles/replace_text/) . 

Si se dispone de un ti'tulo de section <hl> que se quiere mostrar con una tipografi'a muy especial, 
se puede utilizar el siguiente codigo HTML y CSS para sustituirlo por una imagen: 

<hlxspan>Lorem ipsum dolor sit amet</spanx/hl> 
hi { 

width: 450px; 
height: 100px; 

background: #FFF url("/imagenes/titular.png") no-repeat top left; 

} 

hi span { 

display: none; 

} 

El codigo anterior muestra como imagen de fondo del elemento <hl> la imagen que contiene el 
titular escrito con la tipografi'a deseada. Para sustituir el texto por la imagen, simplemente se 
oculta el texto mediante la propiedad display : none. 
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Aunque se trata de una de las tecnicas FIR mas sencillas, su principal problema es que el texto 
oculto mediante display no lo leen correctamente los dispositivos lectores de paginas que 
utilizan las personas con discapacidades visuales. 

La evolution de la tecnica anterior consiste en reemplazar la propiedad display por 
text-indent: 

<hl>Lorem ipsum dolor sit amet</hl> 
hi { 

width: 450px; 
height: 100px; 

background: #FFF url("/imagenes/titular.png") no-repeat top left; 
text-indent: -5000px; 

} 

Utilizando un valor negativo muy grande en la propiedad text-indent del elemento que se 
quiere reemplazar, el texto no se oculta pero se desplaza fuera de la pantalla. Los navegadores 
normales no muestran el texto y los lectores de paginas lo leen correctamente porque el texto no 
esta oculto. 

El problema de la solucion anterior es que si el navegador tiene activado CSS y desactivada la 
carga de las imagenes, no se muestra nada. La solucion consiste en volver a utilizar otro 
elemento <span> dentro del elemento que se quiere reemplazar: 

<hlxspanx/span>Lorem ipsum dolor sit amet</hl> 

hi { 

width: 450px; 
height: 100px; 
position: relative; 

} 

hi span { 

background: #FFF url("/imagenes/titular.png") no-repeat top left; 
position: absolute; 
width: 100%; 
height: 100%; 

} 

En esta solucion, la imagen se muestra por delante del texto, por lo que aunque el texto no se 
oculta ni se desplaza, el usuario no puede verlo. El principal problema de esta tecnica es que no 
se pueden utilizar imagenes con transparencias. 

El articulo Revised Image Replacement (http://www.mezzoblue.com/tests/ 
revised-image-replacement/] presenta otras tecnicas FIR y discute sus problemas y limitaciones. 

Independientemente de los problemas tecnicos relacionados con CSS y los navegadores, el 
principal problema de las tecnicas FIR anteriores es que se deben crear tantas imagenes como 
elementos se quieran reemplazar. Aunque el proceso de creation de imagenes sea automatico, es 
un proceso pesado cuando se quiere modificar por ejemplo el tamano o tipo de letra utilizado. 
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1.7.3. Soluciones avanzadas 

Las soluciones basadas exclusivamente en CSS suelen presentar problemas con los lectores de 
paginas que utilizan las personas discapacitadas para navegar. Por ese motivo se han ideado 
otras soluciones basadas en diferentes lenguajes de programacion. 

El programador Peter-Paul Koch ha creado una solucion basada en JavaScript y que explica en su 
articulo Image Replacement (http://www.quirksmode.org/dom/fir.html) . Esta solucion 
muestra las imagenes en todos aquellos navegadores que las soporten y muestra solo el texto en 
cualquier otro caso. De esta forma, el texto original no se oculta de ninguna manera que pueda 
impedir a los lectores de paginas acceder a los contenidos. 

Otras soluciones permiten crear de forma dinamica las imagenes que sustituyen al texto. El 
proceso es muy complejo porque hay que considerar aspectos como el espacio maximo que 
puede ocupar la imagen y los posibles saltos de linea en el texto. Existen multitud de soluciones 
de este tipo para diferentes lenguajes de programacion, como por ejemplo el proyecto pcdtr 
(http://code.google.eom/p/pcdtr/) para PHP. 

1.8. Sustitucion de texto por Flash 

Como se explica en la section anterior, las soluciones basadas en CSS para sustituir el texto por 
imagenes presentan problemas tecnicos no resueltos: los lectores de paginas pueden no leer el 
texto y los navegadores normales tienen problemas cuando no se pueden cargar las imagenes. 

Ademas, estas soluciones basadas en CSS siempre tienen el inconveniente de que se deben crear 
todas las imagenes que sustituyen al texto. Si las imagenes se crean a mano, el proceso es tedioso 
y poco flexible. Si las imagenes se generan dinamicamente, la aplicacion web puede sufrir una 
penalization apreciable en su rendimiento. 

La solucion definitiva de todos los problemas de las soluciones basadas en CSS es la tecnica sIFR 
(http://www.mikeindustries.com/blog/sifr/) [Scalable Inman Flash Replacement ), que combina 
CSS, JavaScript y Flash para mostrar correctamente cualquier texto con cualquier tipografia 
deseada. 

La version de sIFR recomendada para su uso en sitios web es la version sIFR 2 

(http://www.mikeindustries.com/blog/sifr/) , ya que la version sIFR 3 

(http://wiki.novemberborn.net/sifr3) todavia se encuentra en periodo de pruebas. 

A continuation se muestran los pasos que hay que seguir para sustituir el texto con la tecnica 
sIFR: 

1) Descarga la ultima version disponible de los archivos de sIFR. Actualmente, la version estable 
es 2.0.2 y se puede descargar mediante el archivo comprimido sIFR2.0-2.zip 
(http://www.mikeindustries.eom/blog/files/sifr/2.0/sIFR2.0.2.zip) . Descomprime este archivo 
en cualquier carpeta del sistema. 

2) El segundo paso consiste en crear un archivo Flash que incluya la fuente que se va a utilizar en 
la sustitucion. Abre el archivo sifr.fla con un editor de archivos de tipo Flash (como por 
ejemplo el programa Flash Professional (http://www.adobe.com/es/products/flash/) ). Si no 
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dispones de ningun editor de archivos Flash, mas adelante se muestran varias herramientas y 
utilidades equivalentes. 

Cuando se abre el archivo sifr .fla, solo se ve un rectangulo bianco. Pincha dos veces sobre ese 
rectangulo de forma que se muestre un texto. Selecciona el texto, modifica su fuente por la 
tipografia que quieres utilizar en el diseno de tu pagina y guarda los cambios. 

Si el texto que vas a sustituir contiene caracteres especiales o caracteres propios de algunos 
idiomas, debes anadir todos esos caracteres mediante la paleta de Propiedades del texto. 

3) Exporta el archivo Flash mediante la option File > Export > Export Movie (o Archivo > 
Exportar). Una buena recomendacion consiste en guardar el archivo con el mismo nombre del 
tipo de letra que incluye (arial.swf, verdana.swf, etc.). Una vez creado el archivo, guardalo en 
un directorio del servidor en el que guardes todas las fuentes de sIFR (puedes llamar a este 
directorio fuentes/ por ejemplo). 

4) sIFR necesita varios archivos CSS y JavaScript para funcionar. Copia el archivo sifr. js en la 
carpeta de archivos JavaScript de tu servidor web (normalmente este directorio se llama js/). 
Copia los archivos CSS sIFR-screen.css y sIFR-print.css en la carpeta de archivos CSS de tu 
servidor web (normalmente este directorio se llama css/). 

5) Todas las paginas en las que se sustituye el texto por Flash deben incluir los archivos 
JavaScript y CSS. Para ello, anade lo siguiente dentro de la seccion <head> de la pagina: 

<head> 

<script src="js/sifr.js" type="text/javascript"x/script> 

<link rel="stylesheet" href="css/sIFR-screen.css" type="text/css" media="screen" /> 
<link rel="stylesheet" href="css/sIFR-print.css" type="text/css" media="print" /> 

</head> 

El valor de los atributos src y href debe contener la ruta completa (absoluta o relativa) hasta los 
archivos JavaScript y CSS respectivamente. 

Tambien es posible anadir las reglas de los archivos CSS de sIFR en los archivos CSS propios de 
la pagina y asi no tener que enlazar otros dos archivos CSS en cada pagina. 

6) A partir de este momento ya es posible sustituir cualquier texto por Flash utilizando 
instrucciones JavaScript sencillas. A continuation se muestra el codigo JavaScript necesario para 
mostrar todos los titulares de la pagina con una tipografia propia: 

if(typeof sIFR == "function"){ 

sIFR.replaceElement("hl"j named({sFlashSrc: "../fuentes/mifuente.swf"})); 

}; 

El codigo JavaSript anterior lo puedes colocar en cualquier parte de la pagina. Algunos 
disenadores prefieren colocarlo en la seccion <head> donde se encuentran el resto de elementos 
de sIFRy otros disenadores prefieren colocarlo justo antes de la etiqueta </body> de cierre de la 
pagina. 
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La sustitucion requiere que en la funcion replaceElement() se indique el selector CSS de los 
elementos que se van a sustituir y una serie de opciones que se deben tener en cuenta en la 
sustitucion. La unica opcion obligatoria se denomina sFlashSrc e indica la ruta completa hasta 
el archivo . swf que contiene la tipografia deseada. 


A continuation se muestra una tabla con todas las propiedades de sFIR: 


Opcion 

Description 

sSelector 

El selector del elemento o elementos que se quieren reemplazar. Se puede indicar 
mediante esta opcion o como primer argumento de la funcion replaceElement(). Se 
pueden indicar varios selectores separandolos por comas. Los selectores soportados son 
los de etiqueta, clase, id y el selector de hijos. 

sFlashSrc 

Ruta completa hasta el archivo . swf que contiene la fuente utilizada. Si indicas la ruta 
de forma relativa, el origen es la propia pagina HTML. 

sColor 

Color del texto indicado en formato hexadecimal, como por ejemplo #000000 o 
#CC0000 

sLinkColor 

Color de los enlaces que puede contener el texto 

sHoverColor 

Color del estado : hover de los enlaces que puede contener el texto 

sBgColor 

Color de fondo del texto indicado en formato hexadecimal 

nPaddingTop 

nPaddingRight 

nPaddingBottom 

nPaddingLeft 

Relleno superior, izquierdo, inferior e izquierdo del texto 

sCase 

Transformacion del texto. El valor upper transforma el texto a mayusculas; el valor 
lower lo transforma a minusculas 

sWmode 

Esta opcion causa problemas en algunas versiones de algunos navegadores, por lo que 
no se recomienda su uso. Si se le asigna el valor transparent, el Flash que sustituye al 
texto tiene un fondo transparente. Si se emplea el valor opaque, el Flash tiene un color 
de fondo solido. 

sFlashVars 

Variables adicionales que pueden modificar el aspecto del texto sustituido. 
textalign=center centra el texto de forma horizontal 

off setleft=5 desplaza el texto hacia la derecha los pixeles indicados por el numero 
off setTop=5 desplaza el texto hacia abajo los pixeles indicados por el numero 
underline=true muestra los enlaces subrayados en el estado : hover 


El siguiente ejemplo muestra los titulares de section <hl>, <h2> y <h3> con el mismo tipo de letra 
y color negro, mientras que sus posibles enlaces se muestran de color azul que cambia a rojo 
cuando se pasa el raton por encima del texto: 


if(typeof sIFR == "function"){ 

sIFR.replaceElement("hl, h2, h3"j named({sFlashSrc: "./sifr/vandenkeere.swf", sColor: 
"#000", sLinkColor: "#336699", sHoverColor: "#CC0000"})); 


El principal inconveniente de la tecnica sIFR es la creation del archivo . swf con la fuente que se 
quiere mostrar. Ademas de ser un proceso manual, es necesario disponer de un editor de 
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archivos Flash. Afortunadamente, debido a la popularidad de sIFR, se han publicado numerosas 
herramientas para crear los archivos . swf necesarios: 

■ sIFR Generator (http://www.sifrgenerator.com/wizard.html] : aplicacion web que genera 
de forma rapida y sencilla el archivo . swf a partir de una fuente de tipo TrueType 
(extension .ttf). 

■ sIFR Font Embedder (http://digitalretrograde.com/Projects/sifrFontEmbedder/] : 
aplicacion de escritorio que genera el archivo . swf a partir de la fuente seleccionada. 
Permite anadir facilmente todos los caracteres especiales deseados. Requiere el uso de un 
programa externo llamado swfmill y del framework .NET version 2.0. 

■ Extension para integrar sIFR en DreamWeaver (http://www.tecnorama.org/ 
document.php?id_doc=70] : extension para el conocido entorno de desarrollo de sitios 
web Dreamweaver. Permite configurar todas las opciones de sIFR de forma visual y crea 
automaticamente los enlaces a los archivos CSS y JavaScript necesarios. 

1.9. Esquinas redondeadas 

El actual estandar CSS 2.1 obliga a que todos los hordes de los elementos sean rectangulares. 
Esta limitation es una de las mas criticadas por los disenadores, ya que les impide crear hordes 
curvos o redondeados que se adapten mejor a sus disenos. 

La futura version CSS 3 incluye varias propiedades para definir hordes redondeados. La 
propiedad border-radius establece la misma curvatura en todas las esquinas y tambien se 
definen las propiedades border-top-right-radius, border-bottom-right-radius, 
border-bottom-left-radius, border-top-left-radius para establecer la curvatura de cada 
esquina. 

En cada propiedad se debe indicar obligatoriamente una medida y se puede indicar 
opcionalmente una segunda medida. Cuando se indica una sola medida, la esquina es circular y 
su radio es igual a la medida indicada. Cuando se indican dos medidas, la esquina es eliptica, 
siendo la primera medida el radio horizontal de la elipse y la segunda medida su radio vertical. 

Aunque faltan muchos anos hasta que se publique la version definitiva de CSS 3, los navegadores 
que mas se preocupan de los estandares ya incluyen soporte para crear esquinas redondeadas. 
El siguiente ejemplo muestra como crear esquinas redondeadas con los navegadores Safari y 
Firefox: 

div { 

-webkit-border-radius: 5px 10px; /* Safari */ 

-moz-border-radius: 5px 10pxj /* Firefox */ 

} 

La solution basada en CSS 3 es la mas sencilla y la mejor tecnicamente, pero hasta que todos los 
navegadores no incluyan soporte para CSS 3, no es posible utilizar esta tecnica para crear 
esquinas redondeadas. 
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Afortunadamente, las esquinas redondeadas son uno de los recursos mas solicitados por los 
disenadores web y por eso se han definido decenas de tecnicas para mostrarlas. Las tecnicas se 
clasifican en: 

■ Soluciones basadas en CSS y que no utilizan imagenes. 

■ Soluciones basadas en CSS y que utilizan imagenes. 

■ Soluciones basadas en JavaScript. 

Las soluciones basadas exclusivamente en CSS y que no utilizan imagenes combinan HTML y CSS 
para enganar al ojo del usuario y hacerle creer que la esquina es redondeada. 

El truco consiste en anadir varios elementos cuya longitud disminuye progresivamente para 
crear un perfil curvo. La siguiente imagen muestra el resultado final de esta tecnica (izquierda), 
el numero de elementos necesarios para conseguirlo (centro) y un detalle ampliado de una 
esquina (derecha): 



Figura 1.7. Esquinas redondeadas creadas con CSS y sin imagenes (resultado final y detalle de como 
se consigue) 

A continuation se muestra el codigo HTML y CSS necesarios para crear esquinas redondeadas 
con CSS y sin imagenes: 

<div id="contenedor"> 

<b class="esquinas_superiores"> 

<b class="rl"x/b> 

<b class="r2"x/b> 

<b class="r3"x/b> 

<b class="r4"x/b> 

</b> 

</-- Aqui se incLuyen Los contenidos --> 

<b class="esquinas_inferiores"> 

<b class="r4"x/b> 

<b class="r3"x/b> 

<b class="r2"x/b> 

<b class="rl"x/b> 
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</b> 

</div> 

.esquinas_superiores, .esquinas_inferiores { 
display: block; 

} 

.esquinas_superiores *, .esquinas_inferiores * { 
display: block; 
height: lpx; 
overflow: hidden; 

} 

.rl { margin: 0 5px; } 

.r2 { margin: 0 3px; } 

.r3 { margin: 0 2px; } 

.r4 { margin: 0 lpx; height: 2px; } 

Para crear una esquina redondeada con esta tecnica es necesario incluir muchos elementos 
HTML adicionales. Por ese motivo se utiliza la etiqueta <b>, que hace que el codigo HTML siga 
siendo valido y su nombre solo tiene una letra, por lo que aumenta lo mi'nimo posible el tamano 
del codigo HTML. 

Las reglas CSS anteriores hacen que los elementos <b> tengan solo lpx de altura y que cada vez 
se hagan mas cortos, ya que aumentan sus margenes laterales de forma progresiva. Modificando 
ligeramente los margin de cada elemento se pueden crear esquinas con mas o menos radio de 
cuvatura. Ademas, tambien se pueden crear curvas solo en una de las esquinas. 

El principal problema de esta tecnica es que no es sencillo cambiar la forma de la esquina 
redondeada y que la curva es tan escalonada que los usuarios pueden apreciarlo. 

La solution al segundo problema consiste en crear curvas que utilicen la tecnica del anti-aliasing 
para suavizar sus bordes. Esta tecnica no es sencilla, ya que se debe tener en cuenta el radio de 
curvatura, el color de la curva y el color de fondo del elemento contenedor. 

Algunas aplicaciones web generan automaticamente el codigo HTML y CSS necesarios a partir de 
los colores y el radio de curvatura deseado. A continuation se muestra el codigo HTML y CSS 
generados por la tecnica Spiffy Corners (http://www.spiffycorners.com/): 

<div> 

<b class="spiffy"> 

<b class="spiffyl"xbx/bx/b> 

<b class="spiffy2"xbx/bx/b> 

<b class="spiffy3"x/b> 

<b class="spiffy4"x/b> 

<b class="spiffy5"x/bx/b> 

<div class="spiffyfg"> 

<!-- Aqui. se incLuyen Los contenidos --> 

</div> 

<b class="spiffy"> 

<b class="spiffy5"x/b> 

<b class="spiffy4"x/b> 

<b class="spiffy3"x/b> 

<b class="spiffy2"xbx/bx/b> 
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<b class="spiffyl"><bx/b></bx/b> 

</div> 

.spiffy{display:block} 

•spiffy *{ 
display:block; 
height:lpx; 
overflow:hidden; 
font-size:.01em; 
background:#000000} 

.spiffyl{ 
margin-left:3px; 
margin-right:3px; 
padding-left:lpx; 
padding-right:lpx; 
border-left:lpx solid #919191; 
border-right:lpx solid #919191; 
background:#3f3f3f} 

.spiffy2{ 
margin-left:lpx; 
margin-right:lpx; 
padding-right:lpx; 
padding-left:lpx; 
border-left:lpx solid #e5e5e5; 
border-right:lpx solid #e5e5e5; 
background:#303030} 

.spiffy3{ 
margin-left:lpx; 
margin-right:lpx; 
border-left:lpx solid #303030; 
border-right:lpx solid #303030;} 

.spiffy4{ 

border-left:lpx solid #919191; 
border-right:lpx solid #919191} 

.spiffy5{ 

border-left:lpx solid #3f3f3f; 
border-right:lpx solid #3f3f3f} 

.spiffyfg{ 
background:#000000} 

RoundedCornr (http://www.roundedcornr.com/) es otra aplicacion web que permite generar 
automaticamente el codigo HTML y CSS necesarios para crear esquinas redondeadas avanzadas. 

Ademas de las esquinas redondeadas sencillas, muchos disenadores quieren utilizar en sus 
trabajos esquinas complejas creadas a partir de imagenes. Una vez mas, la futura version CSS 3 
incluira una propiedad llamada border-image para utilizar cualquier imagen como borde de un 
elemento. 

Hasta que los navegadores no soporten CSS 3, la solution consiste en aplicar las imagenes 
mediante CSS y algunos elementos HTML especialmente preparados. 

Esta tecnica requiere en primer lugar crear las imagenes de cada una de las cuatro esquinas del 
elemento. Una vez creadas las imagenes, se anaden elementos en el codigo HTML. Utilizando 
CSS, se muestran las esquinas redondeadas como imagenes de fondo de esos elementos HTML. 
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Los elementos HTML que se anaden pueden variar de una solution a otra, pero en general se 
anaden elementos <b> porque es una etiqueta de una sola letra: 

<div id="contenedor"> 

<b class="superior"> 

<bx/b> 

</b> 

</-- Aqui. se incLuyen Los contenidos --> 

<b class="inferior"> 

<bx/b> 

</b> 

</div> 

Con el codigo HTML anterior, las reglas CSS necesarias para mostrar las imagenes de cada 
esquina son muy sencillas: 

b.superior { background:url("imagenes/esquina_superior_izquierda.png") no-repeat; } 
b.superior b { background:url("imagenes/esquina_superior_derecha.png") no-repeat; } 

b.inferior { background:url("imagenes/esquina_inferior_izquierda.png") no-repeat; } 
b.inferior b { background:url("imagenes/esquina_inferior_derecha.png") no-repeat; } 

Por ultimo, cuando las esquinas redondeadas no utilizan imagenes, es mas conveniente utilizar 
soluciones basadas en JavaScript. La principal ventaja de esta tecnica es que no es necesario 
ensuciar de forma permanente el codigo HTML con decenas de elementos de tipo <div> o <b>. 
Cuando el usuario carga la pagina, el codigo JavaScript crea en ese momento todos los elementos 
necesarios y los anade de forma dinamica al codigo HTML de la pagina. 

Ademas, la otra gran ventaja de las soluciones basadas en JavaScript es que anaden decenas de 
elementos para crear bordes redondeados tan perfectos que son indistinguibles de los que se 
pueden crear con imagenes. 

Algunas de las soluciones basadas en JavaScript mas conocidas son jQuery Corner 
(http://methvin.com/jquery/jq-corner.html] , jQuery Curvy Corners (http://blue-anvil.com/ 
archives/anti-aliased-rounded-corners-with-jquery] , jQuery Corners (http://www.atblabs.com/ 
jquery.corners.html] y Nifty Corners Cube (http://www.html.it/articoli/niftycube/index.html]. 

El articulo CSS Rounded Corners Roundup (http://www.smileycat.com/miaow/archives/ 
000044.php) compara decenas de tecnicas para crear esquinas redondeadas basadas en CSS y 
JavaScript. 

1.10. Rollovers y sprites 

Segun varios estudios realizados por Yahoo!, hasta el 80% de la mejora en el rendimiento de la 
descarga de paginas web depende de la parte del cliente. En el articulo Performance Research, 
Part 1: What the 80/20 Rule Tells Us about Reducing HTTP Requests (http://yuiblog.com/blog/ 
2006/11/28/performance-research-part-l/] Yahoo! explica que generar dinamicamente el 
codigo HTML de la pagina y servirla ocupa el 20% del tiempo total de descarga de la pagina. El 
80% del tiempo restante los navegadores descargan las imagenes, archivos JavaScript, hojas de 
estilos y cualquier otro tipo de archivo enlazado. 
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Ademas, en la mayorfa de paginas web normales, la mayor parte de ese 80% del tiempo se 
dedica a la descarga de las imageries. Por tanto, aunque los mayores esfuerzos siempre se 
centran en reducir el tiempo de generation dinamica de las paginas, se consigue mas y con 
menos esfuerzo mejorando la descarga de las imagenes. 

La idea para mejorar el rendimiento de una pagina que descarga por ejemplo 15 imagenes 
consiste en crear una unica imagen grande que incluya las 15 imagenes individuates y utilizar las 
propiedades CSS de las imagenes de fondo para mostrar cada imagen. Esta tecnica se presento 
en el articulo CSS Sprites: Image Slicing’s Kiss of Death (http://www.alistapart.com/articles/ 
sprites) y desde entonces se conoce con el nombre de sprites CSS. 

El siguiente ejemplo explica el uso de los sprites CSS en un sitio web que muestra la prevision 
meteorologica de varias localidades utilizando iconos: 

Previsioues meteoro logic as 


Localidad i: sole ado. max: 35°. min: 23° 

' T ‘ 



Loc alidad 2: nublado : max: 25° mm: 13° 


& 


Loc alidad 3: may nublado. max: 22° : min: 10° 


Loc alidad 4: tormentas, max: 23°, min: 11° 


Figura 1.8. Aspecto de la prevision meteorologica mostrada con iconos 


La solucion tradicional para crear la pagina anterior consiste en utilizar cuatro elementos <img> 
en el codigo HTML y disponer de cuatro imagenes correspondientes a los cuatro iconos: 
<h3>Previsiones meteorologicas</h3> 

<p id="localidadl"ximg src="imagenes/sol.png" /> Localidad 1: soleado, max: 35 9 j min: 
23 9 </p> 

<p id="localidad2"ximg src="imagenes/sol_nubes.png" /> Localidad 2: nublado, max: 25 e , 
min: 13 9 </p> 

<p id="localidad3"ximg src="imagenes/nubes.png" /> Localidad 3: muy nublado, max: 22 9 , 
min: 10 9 </p> 

<p id="localidad4"ximg src="imagenes/tormentas.png" /> Localidad 4: tormentas, max: 

23 e j min: ll 9 </p> 

Aunque es una solucion sencilla y que funciona muy bien, se trata de una solucion 
completamente ineficiente. El navegador debe descargar cuatro imagenes diferentes para 
mostrar la pagina, por lo que debe realizar cuatro peticiones al servidor. 

Despues del tamano de los archivos descargados, el numero de peticiones realizadas al servidor 
es el factor que mas penaliza el rendimiento en la descarga de paginas web. Utilizando la tecnica 
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de los sprites CSS se va a rehacer el ejemplo anterior para conseguir el mismo efecto con una sola 
imagen y por tanto, una sola peticion al servidor. 


El primer paso consiste en crear una imagen grande que incluya las cuatro imagenes 
individuales. Como los iconos son cuadrados de tamano 32px, se crea una imagen de 32px x 
128px: 


n 


4 imagenes 1 imagen 


'4# 



32dx 



lb 

64dx 




96dx 

3 * 





Figura 1.9. Creando un sprite de CSS a partir de varias imagenes individuales 


Para facilitar el uso de esta tecnica, todas las imagenes individuales ocupan el mismo sitio dentro 
de la imagen grande. De esta forma, los calculos necesarios para desplazar la imagen de fondo se 
simplifican al maximo. 

El siguiente paso consiste en simplificar el codigo HTML: 

<h3>Previsiones meteorol6gicas</h3> 

<p id="localldadl">Localldad 1: soleado, max: 35 9 , min: 23 9 </p> 

<p id="localidad2">Localidad 2: nublado, max: 25 9 , min: 13 9 </p> 

<p id="localidad3">Localidad 3: muy nublado, max: 22 9 , min: 10 9 </p> 

<p id="localldad4">Localldad 4: tormentas, max: 23 9 , min: ll 9 </p> 

La clave de la tecnica de los sprites CSS consiste en mostrar las imagenes mediante la propiedad 
background-image. Para mostrar cada vez una imagen diferente, se utiliza la propiedad 
background-position que desplaza la imagen de fondo teniendo en cuenta la position de cada 
imagen individual dentro de la imagen grande: 

#localidadlj #localidad2j #localidad3j #localidad4 { 
padding-left: 38px; 
height: 32px; 
line-height: 32px; 

background-image: url("imagenes/sprite.png"); 
background-repeat: no-repeat; 

} 

#localidadl { 

background-position: 0 0; 

} 

#localidad2 { 

background-position: 0 -32px; 

} 

#localidad3 { 

background-position: 0 -64px; 
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} 

#localidad4 { 

background-position: 0 -96px; 

} 

La siguiente imagen muestra lo que sucede con el segundo parrafo: 



Figura 1.10. Funcionamiento de la tecnica de los sprites CSS 


El parrafo tiene establecida una altura de 32px, identica al tamano de los iconos. Despues de 
anadir un padding-left al parrafo, se anade la imagen de fondo mediante background-image. 
Para cambiar de una imagen a otra, solo es necesario desplazar de forma ascendente o 
descendente la imagen grande. 

Si se quiere mostrar la segunda imagen, se desplaza de forma ascendente la imagen grande. Para 
desplazarla en ese sentido, se utilizan valores negativos en el valor indicado en la propiedad 
background-position. Por ultimo, como la imagen grande ha sido especialmente preparada, se 
sabe que el desplazamiento necesario son 32 pixel, por lo que la regia CSS de este segundo 
elemento resulta en: 

#localidad2 { 

padding-left: 38px; 
height: 32px; 
line-height: 32px; 

background-image: url("imagenes/sprite.png"); 
background-repeat: no-repeat; 
background-position: 0 -32px; 

} 

La solucion original utilizaba cuatro imagenes y realizaba cuatro peticiones al servidor. La 
solucion basada en sprites CSS solo realiza una conexion para descargar una sola imagen. 
Ademas, los iconos del proyecto Tango (http://tango.freedesktop.org/) que se han utilizado en 
este ejemplo ocupan 7.441 bytes cuando se suman los tamanos de los cuatro iconos por 
separado. Por su parte, la imagen grande que contiene los cuatro iconos solo ocupa 2.238 bytes. 

Los sprites que incluyen todas sus imagenes verticalmente son los mas faciles de manejar. Si en 
el ejemplo anterior se emplea un sprite con las imagenes dispuestas tambien horizontalmente: 
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0 ; 






0 : 


32 px 

— 





# 



m 


4 imageries 1 imagen 


Figura 1.11. Sprite complejo que dispone las imagenes de forma vertical y horizontal 


Aparentemente, utilizar este nuevo sprite solo implica que la imagen de fondo se debe desplazar 
tambien horizontalmente: 

Slocalldadlj #localidad2j #localidad3j #localidad4 { 
paddlng-left: 38px; 
height: 32px; 
line-height: 32px; 

backgnound-image: url("imagenes/sprite.png")j 
background-repeat: no-repeatj 

} 

#localidadl { 

background-position: 0 0; 

} 

#localidad2 { 

background-position: -32px 0j 

} 

#localidad3 { 

background-position: 0 -32px; 

} 

#localidad4 { 

background-position: -32px -32px; 

} 

El problema del sprite anterior es que cuando una imagen tiene a su derecha o a su izquierda 
otras imagenes, estas tambien se ven: 
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Previsiones m etc oro logic as 


W' 1 • Xp'calidad 1: s ole ado : max: 35® min: 23° 


Loc alidad 2: nnblado, max: 25® min: 13° 
■-iS^lidad 3: muy nublado : max: 22® : min: 10° 


Lo c alidad 4: tormentas. max: 23®. min: II® 


Figura 1.12. Errores producidos por utilizar un sprite complejo 
La solution de este problema es sencilla, aunque requiere algun cambio en el codigo HTML: 
<h3>Previsiones meteorologicas</h3> 

<p id="localldadl"xlmg src="imagenes/pixel.gif" /> Localidad 1: soleado, max: 35 9 , 
min: 23 a </p> 

<p id="localldad2"xlmg src="imagenes/pixel.glf" /> Localidad 2: nublado, max: 25 9 , 
min: 13 9 </p> 

<p id="localidad3"ximg src="imagenes/pixel.gif" /> Localidad 3: muy nublado, max: 22 9 , 
min: 10 9 </p> 

<p id="localidad4"ximg src="imagenes/pixel.gif" /> Localidad 4: tormentas, max: 23 9 , 
min: ll 9 </p> 

El codigo anterior muestra uno de los trucos habituales para manejar sprites complejos. En 
primer lugar se anade una imagen transparente de lpx x lpx a todos los elementos mediante una 
etiqueta <img>. A continuacion, desde CSS se establece una imagen de fondo a cada elemento 
<img> y se limita su tamano para que no deje ver las imagenes que se encuentran cerca: 

#localidadl img, #localidad2 img, #localidad3 img, #localidad4 img { 
height: 32px; 
width: 32px; 

background-image: url("imagenes/sprite2.png"); 
background-repeat: no-repeat; 
vertical-align: middle; 

> 

#localidadl img { 

background-position: 0 0; 

} 

#localidad2 img { 

background-position: -32px 0; 

} 

#localidad3 img { 

background-position: 0 -32px; 

} 

#localidad4 img { 
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I background-position: -32px -32px; 

| } 

Utilizar sprites CSS es una de las tecnicas mas eficaces para mejorar los tiempos de descarga de 
las paginas web complejas. La siguiente imagen muestra un sprite complejo que incluye 241 
iconos del proyecto Tango (http://tango.freedesktop.org/) y solo ocupa 42 KB: 

HoJaaEiiiBo^DisiaaaDe 

oiss§ii#s 

©©®e©©©@©@feC/t7DOac5EllB[Sll 

db<sa<S(3£|[EQ^ - 
dd O □ 

Figura 1.13. Sprite complejo que incluye 210 iconos en una sola imagen 


La mayoria de sitios web profesionales utilizan sprites para mostrar sus imagenes de adorno. La 
siguiente imagen muestra el sprite del sitio web YouTube: 



★ ★★★★ 
•kirkiri 




<A> 



Figura 1.14. Sprite utilizado por el sitio web de YouTube 
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Los principales inconvenientes de los sprites CSS son la poca flexibilidad que ofrece (anadir o 
modificar una imagen individual no es inmediato) y el esfuerzo necesario para crear el sprite. 

Afortunadamente, existen aplicaciones web como CSS Sprite Generator 
[http://spritegen.website-performance.org/] que generan el sprite a partir de un archivo 
comprimido en formato ZIP con todas las imagenes individuales. 

1.11. Texto 

1.11.1. Tamano de letra 

La recomendacion mas importante cuando se trabaja con las propiedades tipograficas de CSS 
esta relacionada con el tamano de la letra. La propiedad font-size permite utilizar cualquiera 
de las nueve unidades de medida definidas por CSS para establecer el tamano de la letra. Sin 
embargo, la recomendacion es utilizar unicamente las unidades relativas % y em. 

De hecho, el documento CSS Techniques for Web Content Accessibility Guidelines 1.0 
[http://www.w3.org/TR/WCAG10-CSS-TECHS/] elaborado por el organismo W3C recomienda 
utilizar siempre esas unidades de medida para mejorar la accesibilidad de los contenidos web. 
La siguiente version del documento ( Techniques for WCAG 2.0 (http://www.w3.org/TR/ 
WCAG20-GENERAL/) ] aun se encuentra en proceso de elaboration, pero su borrador de trabajo 
recoge exactamente las mismas recomendaciones en lo que se refiere al texto. 

Ademas de mejorar la accesibilidad de los contenidos de texto, las unidades de medida relativas 
% y em hacen que las paginas sean mas flexibles y se adapten a cualquier medio y dispositivo sin 
apenas tener que realizar modificaciones. Ademas, si se utilizan las unidades de medida relativas 
es posible modificar todos los tamanos de letra del sitio de forma consistente e inmediata. 

Aunque todos los disenadores web profesionales conocen esta recomendacion y utilizan solo las 
unidades % y em para establecer todos sus tamanos de letra, los disenadores que comienzan a 
trabajar con CSS encuentran dificultades para comprender estas unidades y prefieren utilizar la 
unidad px. 

Si tienes dificultades para comprender la unidad em y prefieres establecer los tamanos de letra 
mediante pixeles, puedes utilizar el siguiente truco. Como todos los navegadores establecen un 
tamano de letra por defecto equivalente a I6px, si se utiliza la siguiente regia CSS: 

body { 

font-size: 62.5%; 

} 

El tamano de letra del elemento <body>, y por tanto el tamano de letra base del resto de 
elementos de la pagina, se establece como el 62.5% del tamano por defecto. Si se calcula el 
resultado de I6px x 62.5% se obtienen I0px. 

La ventaja de establecer el tamano de letra del <body> de esa forma es que ahora se pueden 
utilizar em mientras se piensa en px. En efecto, las siguientes reglas muestran el truco en la 
practica: 
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body { 

font-size: 62.5%; 

} 

hi { 

font-size: 2em; /* 2em = 2 x 10px = 20px */ 

} 

P { 

font-size: 1.4em; /* 1.4em x 10px = 14px */ 

} 

Como el tamano base son 10px, cualquier valor de em cuya referenda sea el elemento <body> 
debe multiplicarse por 10, por lo que se puede trabajar con em mientras se piensa en px. 

1.11.2. Efectos graficos 

1.11.2.1. Texto con sombra 

Mostrar texto con sombra es otra de las limitaciones de CSS que mas irritan a los disenadores. En 
realidad, la version CSS 2 incluia una propiedad llamada text-shadow para mostrar textos con 
sombra. La version CSS 2.1 que utilizan todos los navegadores de hoy en dia elimina esta 
propiedad, aunque se vuelve a recuperar en la futura version CSS 3. 

En los navegadores que mas se preocupan por los estandares ya es posible utilizar la propiedad 
text-shadow de CSS 3: 

hi { 

color: #000; 

text-shadow: #555 2px 2px 3px; 

} 

La sintaxis de la propiedad text-shadow obliga a indicar dos medidas y permite establecer de 
forma opcional una tercera medida y un color. Las dos medidas obligatorias son 
respectivamente el desplazamiento horizontal y vertical de la sombra respecto del texto. La 
tercera medida opcional indica lo nitido o borroso que se ve la sombra y el color establece 
directamente el color de la sombra. 

Las ultimas versiones de los navegadores Firefox, Safari y Opera ya soportan la propiedad 
text-shadow, aunque no siempre de forma fiel a la description del futuro estandar CSS 3. 

Por otra parte, el navegador Internet Explorer no incluye la propiedad text-shadow, pero 
incluye un mecanismo propio que se puede utilizar para crear un efecto parecido. Una vez mas, 
la solution se basa en el uso de los filtros de Internet Explorer (http://msdn.microsoft.com/ 
en-us/library/ms532853(VS.85].aspx] . Concretamente, el filtro shadow 
(http://msdn.microsoft.com/en-us/library/ms533086(VS.85].aspx] se puede emplear para 
crear una sombra sobre cualquier elemento, por ejemplo un contenido de texto. 

La siguiente regia CSS muestra el filtro necesario para crear un efecto similar al del ejemplo 
anterior: 

I hi { 

| filter: shadow(color=#555555, direction=135j strength=2); 
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I zoom: 1; /* necesario para activar La propiedad hasLayout */ 

| } 

1.11.2.2. Texto con relleno gradiente o degradado 

Combinando el texto con imagenes semitransparentes, se pueden lograr facilmente efectos 
graficos propios de los programas de diseno. A continuacion se detalla como crear un texto que 
muestra su color en forma de degradado o gradiente. 

El truco consiste en mostrar por encima del texto una imagen semitransparente que simule el 
efecto degradado. La siguiente imagen muestra el esquema de la solution: 

Lorem ipsum 
Lorem ipsum 


Figura 1.15. Mostrando texto avanzado gracias a una imagen semitransparente 

En el esquema anterior, la imagen semitransparente se muestra en el interior de un cuadrado de 
color negro para poder visualizar correctamente su aspecto real. 

Si se dispone por ejemplo de un titular de section <hl>, el primer paso consiste en anadir un 
elemento HTML adicional (normalmente un <span>) para mostrar la imagen semitransparente: 

<!-- ELemento originaL --> 

<hl>Lorem Ipsum</hl> 

<!-- ELemento preparado para mostrar texto avanzado --> 

<hlxspanx/span>Lorem Ipsum</hl> 

Una vez preparado el codigo HTML, el truco consiste en mostrar la imagen semitransparente 
como imagen de fondo del elemento <span>. Ademas, ese elemento <span> se muestra por 
delante del contenido de texto del elemento <hl> y ocupando toda su longitud: 
hi { 

position: relative; 

> 

hi span { 

position: absolute; 
display: block; 

background: url("imagenes/gradiente.png") repeat-x; 
width: 100%; 
height: 31px; 

} 

Para conseguir diferentes acabados en el degradado del texto, se modifica la position de la 
imagen de fondo mediante las propiedades background o background-position. 


Texto normal 


Imagen semitransparente 


Lorem ipsum + 
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Utilizando este mismo truco pero con otras imagenes, se pueden conseguir efectos tan 
espectaculares como los que se pueden ver en los ejemplos del arti'culo CSS Gradient Text 
(http://www.webdesignerwall.com/demo/css-gradient-text/). 
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Capitulo 2. Buenas practicas 

2.1. Inicializar los estilos 

Cuando los navegadores muestran una pagina web, ademas de aplicar las hojas de estilo de los 
disenadores, siempre aplican otras dos hojas de estilos: la del navegador y la del usuario. 

La hoja de estilos del navegador se utiliza para establecer el estilo inicial por defecto a todos los 
elementos HTML: tamanos de letra, decoration del texto, margenes, etc. Esta hoja de estilos 
siempre se aplica a todas las paginas web, por lo que cuando una pagina no incluye ninguna hoja 
de estilos propia, el aspecto con el que se muestra en el navegador se debe a esta hoja de estilos 
del navegador. 

Por su parte, la hoja de estilos del usuario es la que puede aplicar el usuario mediante su 
navegador. Aunque la inmensa mayoria de usuarios no utiliza esta caracteristica, en teoria es 
posible que los usuarios establezcan el tipo de letra, color y tamano de los textos y cualquier otra 
propiedad CSS de los elementos de la pagina que muestra el navegador. 

El orden en el que se aplican las hojas de estilo es el siguiente: 



Figura 2.1. Orden en el que se aplican las diferentes hojas de estilos 

Por tanto, las reglas que menos prioridad tienen son las del CSS de los navegadores, ya que son 
las primeras que se aplican. A continuation se aplican las reglas definidas por los usuarios y por 
ultimo se aplican las reglas CSS definidas por el disenador, que por tanto son las que mas 
prioridad tienen. 


Nota 

CSS define la palabra reservada ! important para controlar la prioridad de las declaraciones de las 
diferentes hojas de estilos. Las reglas CSS que incluyen la palabra ! important tienen prioridad sobre el 
resto de las reglas CSS, independientemente del orden en el que se incluyan o definan las reglas. 

En caso de igualdad, las reglas [important de los usuarios son mas importantes que las reglas 
! important del disenador. Gracias a esta caracteristica, si un usuario sufre deficiencias visuales, puede 
crear una hoja de estilos CSS con reglas de tipo ! important con la seguridad de que el navegador siempre 
aplicara esas reglas por encima de cualquier otra regia definida por los disenadores. 


El principal problema de las hojas de estilo de los navegadores es que los valores que aplican por 
defecto son diferentes en cada navegador. Aunque todos los navegadores coinciden en algunos 
valores importantes (tipo de letra serif, color de letra negro, etc.) presentan diferencias en 
valores tan importantes como los margenes verticales (margin-bottom y margin-top) de los 
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ti'tulos de section (<hl>, ... <h6>), la tabulation izquierda de los elementos de las listas 
(margin-left o padding-left segun el navegador) y el tamano de li'nea del texto (line-height). 

A continuation se muestra el codigo HTML de una pagina de ejemplo y seguidamente, una 
imagen que muestra como la visualizan los navegadores Internet Explorer y Firefox: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ 
xhtmll/DTD/xhtmll-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Reset</title> 

</head> 

<body> 

<hl>Lorem ipsum dolor sit amet</hl> 

<h2>Consectetuer adipiscing elit</h2> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut consectetuer adipiscing elit</p> 

<ul> 

<li>Elemento l</li> 

<li>Elemento 2</li> 

<li>Elemento 3</li> 

</ul> 

<table summary="Lorem Ipsum"> 

<caption>Lorem Ipsum</caption> 

<tr> 

<th>Celda l-l</th> 

<th>Celda l-2</th> 

</tr> 

<tr> 

<td>Celda 2-l</td> 

<td>Celda 2-2</td> 

</tr> 

</table> 

</body> 

</html> 


Lorem ipsum dolor 

Lorem ipsum dolor 

sit amet 

sit amet 

Consectetuer adipiscing elit 

Consectetuer adipiscing elit 

L^a.ip^dctorsi 1 Mart, consectetuer 

Lorem ipsum dolor sit amet. consectetuer 

tincidunt ut consectetuer adipiscing eHt 


. Elemental 

• Elemento 1 

* Elemental 

• Elemento 2 


.Elemental 

Celda 1-1 Celda 1-2 

Celda^Ld Celda 1-2 

Celda2-1 Celda 2-2 BggffBgfll 

Celda 2-1 Celda 2-2 


Figura 2.2. Visualization de una misma pagina en los navegadores Internet Explorer y Firefox 

Como todas las hojas de estilo de los navegadores son diferentes, cuando un disenador prueba 
sus estilos sobre diferentes navegadores, es comun encontrarse con diferencias visuales 
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apreciables. La solution a este problema es muy sencilla y consiste en borrar o resetear los 
estilos que aplican por defecto los navegadores. 

Una de las formas mas sencillas de neutralizar algunos de los estilos de los navegadores consiste 
en eliminar el margen y relleno a todos los elementos de la pagina para establecerlos 
posteriormente de forma individual: 

* { 

margin: 0; 
padding: 0; 

} 

Aunque la regia CSS anterior se ha utilizado desde hace muchos anos, se trata de una solution 
muy rudimentaria y limitada. La solution completa consiste en crear una hoja de estilos CSS que 
neutralice todos los estilos que aplican por defecto los navegadores y que pueden afectar al 
aspecto visual de las paginas. Este tipo de hojas de estilos se suelen llamar "reset CSS". 

A continuation se muestra la hoja de estilos reset.css propuesta por el disenador Eric Meyer 
(http://meyerweb.com/) : 

/* 1 / 1.0 / 20080212 */ 

html, body, div, span, applet, object, iframe, 
hi, h2, h3, h4, h5, h6, p, blockquote, pre, 

a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 

b, u, i, center, 

dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
margin: 0; 
padding: 0; 
border: 0; 
outline: 0; 
font-size: 100%; 
vertical-align: baseline; 
background: transparent; 

} 

body { 

line-height: 1; 

} 

ol, ul { 

list-style: none; 

> 

blockquote, q { 
quotes: none; 

} 

blockquote:before, blockquote:after, 
q:before, q:after { 
content: ''; 
content: none; 

} 
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/* No oLvides definir estiLos para focus V 
:focus { 
outline: 0; 

} 

/* No oLvides resaLtar de aLguna manera eL texto insertado/borrado */ 
ins { 

text-decoration: none; 

} 

del { 

text-decoration: line-through; 

} 

/* En eL codigo HTML es necesario anadir ceLLspacing="0" */ 
table { 

border-collapse: collapse; 
border-spacing: 0; 

} 

El propio Eric Meyer recuerda que la hoja de estilos anterior es solo un punto de partida que 
debe ser adaptado por cada disenador hasta obtener los resultados deseados. Utilizar una hoja 
de estilos de tipo reset es una de las buenas practicas imprescindibles para los disenadores web 
profesionales. 

2.2. Comprobar el diseno en varios navegadores 

2.2.1. Principales navegadores 

Una de las practicas imprescindibles de los disenadores web profesionales consiste en probar su 
trabajo en varios navegadores diferentes. De esta forma, el disenador puede descubrir los 
errores de su trabajo y tambien los errores causados por los propios navegadores. 

El numero de navegadores y versiones diferentes que se deben probar depende de cada 
disenador. En el caso ideal, el disenador conoce estadisticas de uso de los navegadores que 
utilizan los usuarios para acceder al sitio o aplicacion web que esta disenando. Una buena 
practica consiste en probar los disenos en aquellos navegadores y versiones que sumen un 90% 
de cuota de mercado. 

Cuando no se dispone de estadisticas de uso o el diseno es para un sitio web completamente 
nuevo, se debe probar el diseno en los navegadores mas utilizados por los usuarios en general. 
Aunque no existe ninguna estadistica completamente fiable y los resultados varian mucho de un 
pais a otro, en general los siguientes navegadores y versiones suman mas del 90% de cuota de 
mercado: Internet Explorer 6, Internet Explorer 7, Firefox 2, Firefox 3, Safari 3 y Opera 9. 

En primer lugar, los disenadores web profesionales disponen de todos los navegadores 
principales instalados en sus equipos de trabajo. Por lo tanto, si no lo has hecho ya, descarga e 
instala los siguientes navegadores: 

■ Firefox (http://www.mozilla.com/en-US/firefox/all.html] : disponible para sistemas 
operativos Windows, Mac, Linux y en mas de 45 idiomas. 


www.librosweb.es 


45 



CSS avanzado 


Capftulo 2. Buenas practicas 


■ Opera (http://www.opera.com/download/] : disponible para sistemas operativos 
Windows, Mac, Linux y en multiples idiomas. 

■ Safari (http://www.apple.com/es/safari/) : disponible solamente para sistemas 
operativos Windows y Mac. 

Respecto al navegador Internet Explorer, la mayoria de disenadores trabajan en entornos 
Windows en los que ya esta instalado por defecto. Si tienes la fortuna de trabajar con un sistema 
operativo tipo Linux, puedes instalar varias versiones de Internet Explorer mediante la 
aplicacion IEs4Linux (http://www.tatanka.com.br/ies41inux/page/Main_Page) . Tambien es 
posible instalar varias versiones de Internet Explorer en los sistemas operativos Mac OS X 
gracias a la aplicacion ies4osx (http://www.kronenberg.org/ies4osx/). 

2.2.2. Probar el diseno en todos los navegadores 

En algunas ocasiones no es suficiente con probar los disenos en los navegadores mas utilizados, 
ya que el cliente quiere que su sitio o aplicacion web se vea correctamente en muchos otros 
navegadores. Ademas, en otras ocasiones el disenador ni siquiera dispone de los navegadores 
mas utilizados por los usuarios, de forma que no puede probar correctamente sus disenos. 

Afortunadamente, existe una aplicacion web gratuita que permite solucionar todos estos 
problemas. La aplicacion Browsershots (http://browsershots.org) prueba la pagina indicada en 
varias versiones diferentes de cada navegador, crea una imagen de como se ve la pagina en cada 
uno de ellos y nos muestra esa imagen. 

Aunque el proceso es lento y mucho menos flexible que probar la pagina realmente en cada 
navegador, el resultado permite al disenador comprobar si su trabajo se ve correctamente en 
multitud de navegadores y sistemas operativos. En la actualidad, Browsershots comprueba el 
aspecto de las paginas en 4 sistemas operativos y 72 navegadores diferentes. 

2.2.3. Integrar Internet Explorer en Firefox 

Algunos disenadores prueban continuamente sus disenos en los navegadores Internet Explorer 
y Firefox y despues los comprueban en el resto de navegadores para corregir los ultimos errores. 
Si este es tu caso, puedes mejorar tu productividad gracias a una extension de Firefox. 

IE Tab (https://addons.mozilla.org/es-ES/firefox/addon/1419) es una extension que se instala 
en el navegador Firefox y hace que Internet Explorer se integre en Firefox. Una vez instalada, 
esta extension permite ver las paginas con Internet Explorer dentro de Firefox. 

Aunque resulta sorprendente, IE Tab hace que las paginas en Firefox se puedan ver mediante 
Internet Explorer, de forma que los disenadores no tienen que cambiar constantemente de 
navegador y por tanto aumenta considerablemente su productividad. 

2.2.4. Diferentes versiones de Internet Explorer 

El principal problema de los disenadores web que quieren probar su trabajo en diferentes 
navegadores y versiones es la imposibilidad de instalar varias versiones del navegador Internet 
Explorer en el mismo sistema operativo. 
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Aunque la empresa Microsoft, creadora de Internet Explorer, sigue sin resolver este problema, 
se han publicado soluciones no oficiales para disponer de varias versiones de Internet Explorer 
en el mismo sistema operativo. 

La primera solution propuesta fue el Browser Archive (http://browsers.evolt.org/) , un 
repositorio de navegadores desde el que se pueden descargar versiones antiguas de decenas de 
navegadores diferentes, entre ellos Internet Explorer. Lamentablemente hace mucho tiempo que 
no se anaden nuevas versiones, por lo que la ultima version disponible de Internet Explorer en la 

6 . 

Mas recientemente se ha presentado IETester (http://www.my-debugbar.com/wiki/IETester/ 
HomePage) , una aplicacion descargable gratuitamente y que permite disponer de Internet 
Explorer 5.5, 6, 7 y 8 en un mismo sistema operativo. De esta forma, IETester es una de las 
herramientas imprescindibles de los disenadores web profesionales. 

2.3. Mejora progresiva 

La mejora progresiva ("progressive enhancement ") es uno de los conceptos mas importantes del 
diseno web y a la vez uno de los mas desconocidos. Su origen proviene de su concepto contrario, 
la degradacion util o "gracefuldegradation". 

La degradacion util es un concepto propuesto hace decadas por el psicologo ingles David 
Courtenay Marr. Aplicada al diseno web, la degradacion util significa que un sitio web sigue 
funcionando correctamente cuando el usuario accede con un navegador limitado o antiguo en el 
que no funcionan las caracteristicas mas avanzadas. 

La mejora progresiva toma ese concepto y lo aplica de forma inversa. De esta forma, aplicada al 
diseno web la mejora progresiva significa que el sitio web dispone de caracteristicas mas 
avanzadas cuanto mas avanzado sea el navegador con el que accede el usuario. 

Muchos disenadores web y muchos de sus clientes estan obsesionados con que sus disenos se 
vean exactamente igual en cualquier version de cualquier navegador. Aunque resulta 
practicamente imposible conseguirlo, este tipo de disenadores prefiere sacrificar cualquier 
caracteristica interesante de CSS de manera que las paginas se vean igual en cualquier 
navegador. 

La idea propuesta por la tecnica de la mejora progresiva consiste en que el diseno web permita 
el acceso completo y correcto a toda la information de la pagina independientemente del tipo de 
navegador utilizado por el usuario. Ademas, propone utilizar las caracteristicas mas modernas 
de CSS 2 e incluso de CSS 3, aunque solo los usuarios con navegadores mas modernos sean 
capaces de disfrutarlas. 

La tecnica de la mejora progresiva es mucho mejor que las soluciones alternativas que utilizan 
algunos disenadores: 

■ Utilizar solo las caracteristicas de CSS que soporte correctamente el navegador obsoleto 
Internet Explorer 6, porque un gran numero de usuarios siguen utilizandolo. 

■ Utilizar solo las caracteristicas de CSS que soporten correctamente navegadores limitados 
como Internet Explorer 7, ya que es el navegador mas utilizado por los usuarios. 
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■ Olvidarse completamente de navegadores limitados como Internet Explorer 6 y 7, 
disenando los sitios web solo para los navegadores mas modernos. 

A continuation se muestra la mejora progresiva en la practica mediante un ejemplo publicado en 
el arti'culo Progressive Enhancement with CSS 3: A better experience for modern browsers 
(http://dev.opera.com/articles/view/progressive-enhancement-with-css-3-a-be/). 

El proposito del ejemplo es crear un menu de navegacion que se ve mas bonito cuanto mas 
moderno sea tu navegador. Como es habitual, el codigo HTML del menu se basa en una lista de 
tipo <ul>: 

<ul> 

<lixa href="">Lorem Ipsum</ax/li> 

<lixa href="">Lorem Ipsum</ax/li> 

<lixa href="">Lorem Ipsum</ax/li> 

<lixa href="">Lorem Ipsum</ax/li> 

<lixa href="">Lorem Ipsum</ax/li> 

</ul> 

El primer paso consiste en aplicar los estilos CSS basicos que interpretan correctamente todas 
las versiones de todos los navegadores. Aunque estos estilos hacen que el menu tenga un 
aspecto muy basico, permiten el acceso correcto a todos los contenidos. 
ul { 

background-color: blue; 
border-bottom: lpx dotted #999; 
list-style: none; 
margin: 15px; 
width: 150px; 
padding-left: 0; 

} 

H { 

background-color: #FFF; 
border: lpx dotted #999; 
border-bottom-width: 0; 

font: 1.2em/1.333 Verdana, Arial, sans-serif; 

} 

li a { 

color: #000; 
display: block; 
height: 100%; 
padding: 0.25em 0; 
text-align: center; 
text-decoration: none; 

} 

li a:hover { background-color: #EFEFEF; } 

Las reglas CSS anteriores hacen que el menu de navegacion tenga el siguiente aspecto en cada 
navegador: 
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Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 

Lorem Ipsum 


Internet Expl 

3S 1 

Internet Explorer 7 

1 

Firefox 3 

1 

Safari 3 

1 

Opera 9 


Figura 2.3. Aspecto del menu en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 y Opera 9 


Como se ve en la imagen anterior, incluso con unos estilos CSS tan basicos se producen 
diferencias visuales entre los navegadores. El motivo es que Internet Explorer 6 no es capaz de 
mostrar un borde punteado de lpx de anchura y lo sustituye por un borde discontinue. 


El siguiente paso consiste en utilizar el selector de hijos (uno de los selectores avanzados de 
CSS) para anadir nuevos estilos: 
body > ul { border-width: 0; } 
ul > li { 

border: lpx solid #FFF; 
border-width: lpx 000; 

} 

li > a { 

background-color: #666; 
color: white; 
font-weight: bold; 

} 

li:first-child a { color: yellow; } 
li > a:hover{ background-color: #999; } 


Ahora el primer elemento del menu de navegacion se muestra con otro estilo y cuando el 
usuario pasa su raton por encima de un elemento se muestra destacado: 


Lorem Ipsum 


Lorem Ipsu 

m | 


Lorem Ipsu 

m 

Lorem Ipsum 


Lorem Ipsu 



Lorem Ipsu 

m 

Lorem Ipsum 


Lorem Ipsu 

0 


Lorem Ipsu 

m 

Lorem Ipsum 

Lorem Ipsu 

■ 


Lorem Ipsu 

m 

Lorem Ipsum • 

Lorem Ipsu 

J 


Lorem Ipsu 



Lorem Ipsum 

Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 


1 Internet Expl 

ESI 1 

Internet Explorer 7 

I 

Firefox 3 

I 

Safari 3 

I 

Opera 9 


Figura 2.4. Aspecto del menu en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 y Opera 9 


El navegador Internet Explorer 6 se queda atras y sigue mostrando el menu con el mismo 
aspecto, ya que no es capaz de entender el selector de hijos. La mejora progresiva permite que 
los usuarios de Internet Explorer 6 sigan accediendo a todos los contenidos y que el resto de 
usuarios vean un menu mas avanzado. 


www.librosweb.es 


49 





























CSS avanzado 


Capitulo 2. Buenas practicas 


A continuation se modifica la opacidad de los elementos del menu, de forma que el elemento 
seleccionado se vea mas claramente: 
li { opacity: 0.9; } 
li:hover{ opacity: 1; } 


En esta ocasion, el navegador que se queda atras es Internet Explorer 7, ya que no incluye 
soporte para esa propiedad de CSS. En el resto de navegadores se muestra correctamente el 
efecto: 


Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 



Lorem Ipsum 

Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 



Internet Explorer 6 I Internet Explorer 7 I Firefox3 I Safari 3 I Opera 9 


Figura 2.5. Aspecto del menu en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 y Opera 9 


Otra posible mejora del menu consiste en anadir una sombra al texto del elemento seleccionado 
mediante la propiedad text-shadow de CSS: 

| li a:hover { text-shadow: 2px 2px 4px #333; } 

Solamente los navegadores Safari y Opera soportan la propiedad text-shadow, por lo que el 
navegador Firefox se queda atras y no muestra esta mejora: 


Lorem Ipsum 
Lorem Ipsum 


Lorem Ipsum 
Lorem Ipsum 



Lorem Ipsum 

Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 



Internet Explorer 6 I Internet Explorer 7 I Firefox 3 I Safari 3 I Opera 9 


Figura 2.6. Aspecto del menu en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 y Opera 9 


Por ultimo, utilizando los selectores de CSS 3 se va a alternar el color de fondo de los elementos 
del menu para mejorar su visualization: 

li:nth-child(2n+l) a { 
background-color: #333; 

> 

li:nth-child(n) a:hover { 
background-color: #AAA; 
color: #000; 

} 

li:first-child > a:hover{ color: yellow; } 
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Solamente los navegadores Opera y Safari incluyen todos los selectores de CSS 3, por lo que el 
resultado final del menu en cada navegador es el que muestra la siguiente imagen: 


Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 
Lorem Ipsum 






Lorem Ipsum 


Internet Expl 


Internet Explorer 7 

1 

Firefox 3 

1 

Safari 3 

1 

Opera 9 


Figura 2.7. Aspecto del menu en los navegadores Internet Explorer 6 y 7, Firefox 3, Safari 3 y Opera 9 


Como se ha visto en este ejemplo, la mejora progresiva permite aprovechar todas las 
posibilidades de CSS sin perjudicar a los navegadores obsoletos o limitados. Los usuarios de 
Internet Explorer 6 visualizan un menu muy basico adecuado para un navegador obsoleto, pero 
que les permite el acceso a todos los contenidos. Los usuarios de Internet Explorer 7 visualizan 
un menu normal adecuado a las limitaciones de su navegador pero que tambien permite el 
acceso a todos los contenidos. Por ultimo, los usuarios de los navegadores mas avanzados 
(Opera y Safari) visualizan un menu avanzado que aprovecha todas las caracteristicas 
disponibles en CSS. 


2.4. Depuration 

Inevitablemente, todos los disenadores web cometen errores en los trabajos que realizan. En la 
mayori'a de las ocasiones, los errores se descubren al probar el diseno en diferentes 
navegadores. Ademas de mostrar los errores, los principales navegadores disponen de 
herramientas que permiten descubrir de forma sencilla la causa concreta del error. 

Antes de que existieran estas herramientas avanzadas, el trabajo del disenador era mucho mas 
complicado, ya que no era facil descubrir la causa exacta del error entre todas las posibles: 

■ El selector esta mal escrito. 

■ Las propiedades estan mal escritas o tienen valores no permitidos. 

■ Otros selectores tienen mas prioridad y estan sobreescribiendo una propiedad y/o valor. 

■ Las reglas y valores estan bien escritos, pero los elementos no ocupan el espacio que a 
simple vista parece que estan ocupando en la pantalla. 

■ El navegador tiene un error que impide mostrar correctamente la pagina. 

Los disenadores web idearon hace mucho tiempo soluciones ingeniosas para cada uno de los 
problemas anteriores. En primer lugar, cuando no se esta seguro de si todas las reglas CSS estan 
bien escritas, lo mejor es validar la hoja de estilos utilizando el validador CSS del W3C 
(http://jigsaw.w3.org/css-validator/). 

Una vez descartado el error de sintaxis, el siguiente problema a resolver es por que una regia 
CSS no se aplica correctamente a un elemento. Una estrategia muy utilizada consistia en anadir 
alguna propiedad que sea visualmente significativa para comprobar si realmente el selector se 
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esta aplicando. Poner todo el texto del elemento en negrita, aumentar mucho su tamano de letra 
y cambiar el color de fondo eran algunas de las estrategias habituales. Cuando lo anterior no 
resultaba, se utilizaba directamente la palabra reservada ! important para aumentar la prioridad 
de esa propiedad CSS. 

Otro de los problemas habituales en el diseno web esta relacionado con el espacio que ocupa 
cada elemento en pantalla. Como los elementos por defecto no muestran ningun horde y su color 
de fondo es transparente, no es posible conocer a simple vista el espacio que ocupa cada 
elemento. Por lo tanto, cuando se posicionan elementos de forma flotante o cuando se establecen 
margenes, rellenos, alturas y anchuras maximas/minimas, no es posible visualizar si el 
navegador esta mostrando correctamente todos los elementos. 

Para solucionar este problema la tecnica habitual consistia en anadir un borde visible a los 
elementos. Como los hordes visibles ocupan sitio en pantalla, el problema de esta solution es 
que modifica el propio diseno. La alternativa consistia en anadir un color de fondo diferente para 
cada elemento. Otra posible alternativa es el uso de la propiedad outline de CSS, que anade un 
perfil en el contorno de un elemento pero no ocupa sitio y por tanto no modifica el diseno de la 
pagina. 

Los navegadores modernos como Safari, Opera y Firefox incluyen el soporte de la propiedad 
outline, mientras que el navegador Internet Explorer 7 no es capaz de mostrar perfiles en los 
elementos de la pagina. El disenador Chris Page ha publicado un articulo llamado A Handy CSS 
Debugging Snippet (http://homepage.mac.com/chrispage/iblog/C42511381/ 

E20060806095030/index.html) en el que muestra unas reglas CSS que hacen uso de outline y 
permiten depurar facilmente cualquier diseno sin utilizar herramientas avanzadas: 

* { outline: 2px dotted red } 

* * { outline: 2px dotted green } 

* * * { outline: 2px dotted orange } 

* * * * { outline: 2px dotted blue } 

*****{ outline: lpx solid red } 

******{ outline: lpx solid green } 

*******{ outline; ipx solid orange } 

********{ ou tii ne: ip X solid blue } 


2.4.1. Firebug 

A1 margen de soluciones manuales y tecnicas mas o menos ingeniosas, los disenadores web 
profesionales de hoy en dia utilizan herramientas avanzadas para averiguar con precision la 
causa de los errores de diseno. De todas las herramientas disponibles, la mejor con mucha 
diferencia es Firebug (https://addons.mozilla.org/es-ES/firefox/addon/1843] , una extension 
del navegador Firefox. 

Firebug dispone de todas las utilidades que necesitan los disenadores y programadores web en 
su trabajo. Firebug es una herramienta gratuita, completa, facil de utilizar y para la que se 
publican nuevas versiones de forma continua. 


www.librosweb.es 


52 



CSS avanzado 


Capitulo 2. Buenas practicas 


Despues de instalar Firebug, en la esquina inferior derecha del navegador Firefox aparece un 
nuevo icono. Para abrir Firebug, solamente hay que pinchar con el raton sobre ese icono o pulsar 
directamente la tecla F12 despues de cargar la pagina que se quiere depurar. 


Firebug muestra su informacion dividida en los siguientes paneles: 

■ Consola: muestra mensajes de error, notificaciones y otros tipos de mensajes. No es muy 
util para los disenadores web. 

■ HTML: muestra el codigo HTML de la pagina y permite seleccionar los elementos, 
modificar sus contenidos y ver las reglas CSS que se le estan aplicando. 

■ CSS: muestra todas las hojas de estilos incluidas en la pagina y permite modificar sus 
valores. 

■ Guion y DOM: paneles relacionados con la programacion JavaScript. No son muy utiles 
para los disenadores web. 

■ Red: muestra toda la informacion de todos los elementos descargados por la pagina 
(HTML, JavaScript, CSS, imagenes). 


El primero de los paneles importantes para los disenadores web es el panel HTML: 


S <div id="doc4" class="yui-t7”> 
S <div id="bd"> 

II <div class="yut-gc”» 

IS <div class="yut-g"> 

B <div class="yui-gb"> 

IS <div class="yui-u 
first "> 

IS <div class=”yui-u"> 
B <div class="yui-u"> 


<h2> IrrtroducciOn a 
JavaScript</h2> 


<ing vndth="116" be¬ 
del libro 
Introduccibn a 
JavaScript" src="/w 
/css/images 

d m 1 " IL 


font-size: 154%; 
font-weight: 700 ; 
nargin: 0.5e« 0; 
text-align: center; 

} 

hi, h2, h3, h4, h5, h6 reset - fo -3 ridscss (" nea 7 > 
{ 

font -s iz e: 100%; 
font -we ight: normal; 

} 

body, div, dl, dt, dd, reset-fo...grids.css (h'nea 7) 

ul, ol, li, hi, h2, h3, 

h4, h5, h6, pre, code, 

for*, fieldset, legend, 

input, textarea, p, 

blockquote, th, td { 


iff Inspecaonar Editar h2 div.yui-u div.yui-gb divJfbd div-doc4.yui-t 

Consola HTML CSS Guion DOM Red 


SO 


Estilo Maquetacion DOM 


iV.librosweb.es (Ifnea 12) li. 


Figura 2.8. Panel HTML de Firebug 


El panel HTML es el mas utilizado por los disenadores web, ya que muestra toda la informacion 
de la pagina relacionada con HTML y CSS. En la parte izquierda del panel se muestra el codigo 
HTML de la pagina y en la parte derecha la informacion CSS. 

Si se pulsa el boton "Inspeccionar" de la parte superior de Firebug, es posible seleccionar con el 
raton un elemento de la pagina web. Despues de pinchar sobre cualquier elemento, en la parte 
izquierda se muestra el codigo HTML de ese elemento y en la parte derecha todas las reglas CSS 
que se le aplican. 


www.librosweb.es 


53 















CSS avanzado 


Capitulo 2. Buenas practicas 


Si se pulsa sobre el contenido de un elemento en la parte izquierda del panel HTML, se puede 
modificar su valor y ver el resultado en tiempo real sobre la propia pagina web. Desde este 
mismo panel tambien es posible eliminar el elemento de la pagina. 

La parte derecha del panel HTML es la mas util, ya que siempre muestra todas las reglas CSS que 
se aplican a un elemento de la pagina. Gracias a esta informacion es imposible dudar si un 
selector esta bien escrito o si una regia CSS realmente se esta aplicando a un elemento. 

Ademas, como normalmente varias reglas CSS diferentes aplican valores diferentes a las mismas 
propiedades de un mismo elemento, Firebug muestra tachadas todas las propiedades que en 
teoria se deben aplicar al elemento pero que no lo hacen porque existen otras reglas CSS con 
mas prioridad. 

La parte derecha del panel HTML incluye otras utilidades interesantes como cuando se pasa el 
raton por encima de un color definido en formato hexadecimal y que hace que se vea realmente 
cual es el color. Igualmente, al pasar el raton por encima de una url() utilizada para incluir una 
imagen, Firebug muestra de que imagen se trata. Las reglas CSS que se muestran en la parte 
derecha del panel HTML tambien se pueden modificar, eliminar y bloquear temporalmente. 
Tambien es posible anadir nuevas propiedades a cualquier regia CSS. 

Firebug muestra por defecto el valor de las reglas CSS tal y como se han establecido en las hojas 
de estilos. Sin embargo, muchas veces estos valores originales no son practicos. ^cual es el 
tamano de letra de un elemento con font-size: lem? Sin mas informacion es imposible saberlo. 
^cual es la anchura en pixeles de un elemento con la propiedad width: 60%? Imposible saberlo 
sin conocer las anchuras de sus elementos contenedores. 


Por todo ello, Firebug permite mostrar los valores que realmente utiliza Firefox para dibujar 
cada elemento en pantalla. Pulsando sobre el texto Opciones de la parte derecha del panel 
HTML, se puede activar la opcion Show Computed Style: 


Inspecdonar Editar h2 div.yui-u 

Consola HTML CSS Guion DOM 
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Q <div id="doc4" class=”yui-t7"> 
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Q <div class="yui-g"> 
ffl <hB> 
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ffl <div class="yui-u 
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ffl <div class="yui-u”> 
ffl <div class="yui-u"> 


Text 
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Figura 2.9. Panel HTML de Firebug con la opcion Show Computed Style 
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Despues de activar esta opcion, los tamanos de letra y anchuras se muestran en pi'xeles y se 
muestra el valor de todas las propiedades CSS del elemento, independientemente de si se han 
establecido de forma explfcita o de si se trata de los valores por defecto que aplica el navegador. 


Otra de las utilidades mas interesantes del panel HTML es la informacion sobre la maquetacion 
del elemento, que se puede mostrar pinchando sobre la pestana Maquetacion de la parte derecha 
del panel: 


Inspecdonar Editar h2 div.yui-u div.yui-gb 

Consola HTML CSS Guion DOM Red Cc 

9 <div id="hd"> 

a <div id="doc4” class= ,, yut-t7"> 

B <dtv td="bd"> 

a <div class="yui-gc'’> 

9 <div class="yut-g"> 

9 <h3> 

</dtv> 

B <div class=''yut-gb"> 

9 <div class="yui-u 
ftrst"> 

9 <dtv class="yui-u"> 
B<dtv class="yui-u"> 


<h2> Intro ducciOn a 
JavaScript </h2> 
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Estilo Maquetacion DOM 


desplazamicnto 403 
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Figura 2.10. Pestana Maquetacion del panel HTMLde Firebug 


UQ 

Opdones * 


La opcion Maquetacion muestra la informacion completa del "box model" o modelo de cajas de 
un elemento: anchura, altura, rellenos, bordes y margenes. 

El otro panel mas utilizado por los disenadores web es el panel CSS, que muestra el contenido de 
todas las hojas de estilos que se estan aplicando en la pagina y permite realizar cualquier 
modificacion sobre cualquier regia CSS viendo el resultado en tiempo real en la propia pagina: 


www.librosweb.es 


55 

























CSS avanzado 


Capitulo 2. Buenas practicas 


■j0t- Inspecdonar Editar www.librosweb.es 


)BQ 

Consola HTML~[ CSS Guton DOM Red Cookies YSlow 

wmmSBm 

Opdones * 

.yui-u iag { 


3 


float : left ; 

} 


.yui-u h2 { 


font-size: 15456; 

5 


font-weight: 700; 
margin: 0.5em 0; 
text-align: center; 

> 

.yui-gc .first p { 
display: none; 
float: right; 

■argin: 0.5e«i; 
width: 33X; 

} 

.yui-gc .first i«g { 

■argin-right: 1.5e»; @ 

Figura 2.11. Panel CSS de Firebug 


Por ultimo, el panel Red de Firebug permite ver toda la informacion sobre todos los elementos 
que se descarga el navegador para mostrar la pagina: 


Inspecdonar 

Limpiar Todo HTML CSS JS 

XHR Imagenes Flash | ^ 

y □ 

Consola HTML 

CSS Guion DOM Red ▼ Cookies 

YSlow 

Opdones * 

+ GET www.librc 

304 Not Modified librosweb.es 

3 KB 

515ms 


+ GET reset-fon 

304 Not Modified yui.yahooapis.com 

2 KB 

113ms 


+ GET ga.js 

304 Not Modified google-analytics.co 

m 9 KB 

160ms 


* GET __utm.gif 

google-analytics.com 35 B 

J 162ms 


+ GET logo.big.i 

304 Not Modified librosweb.es 

3 KB 

118ms 


+ GET referenda 

304 Not Modified librosweb.es 

15 KB 

333ms 


SB GET symfony. 

304 Not Modified librosweb.es 

6 KB 


3.53s 

SI GET intro.ajax 

304 Not Modified librosweb.es 

6 KB 

328ms 


+ GET introjs.p 

304 Not Modified librosweb.es 

6 KB 

341ms 


+ GET intro.css. 

304 Not Modified librosweb.es 

6 KB 

364ms 


i GET intro.xhtr 

304 Not Modified librosweb.es 

6 KB 

313ms 


+ GET sprite.png 

304 Not Modified yui.yahooapis.com 

4 KB 

144ms 


12 pedidos 


61 KB 

(61 KB desde el cache) 

4.64s 


Figura 2.12. Panel Red de Firebug 


Desde el punto de vista del disenador, este panel se puede utilizar para mejorar el rendimiento 
de la pagina reduciendo el numero de archivos CSS, reduciendo el numero de imagenes de 
adorno mediante los sprites CSS, reduciendo el numero de peticiones HTTP realizadas al 
servidor y reduciendo el tamano de los archivos. 

2.4.2. Otras herramientas de depuracion 

Firebug es la mejor herramienta para depurar el diseno de los sitios web, pero solo esta 
disponible para el navegador Firefox. Como la mayoria de errores en el diseno web solo se 
producen en los navegadores de la familia Internet Explorer, Firebug no se puede utilizar. 
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Afortunadamente, los creadores de Firebug han publicado una version reducida y simplificada 
de Firebug compatible con el resto de navegadores. La version reducida se denomina Firebug 
Lite (http://getfirebug.com/lite.html) y requiere el uso de JavaScript. Aunque se puede 
descargar Firebug Lite para utilizarlo desde nuestros propios servidores, la forma mas sencilla 
de probarla es anadir el siguiente codigo en la pagina que se quiere depurar: 

I <script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/ 

| firebug-lite-compressed.js"x/script> 

El codigo anterior se puede colocar en cualquier zona de la pagina, aunque normalmente se 
incluye dentro de la seccion cheadx 

Por ultimo, como las empresas que desarrollan los navegadores consideran que Firebug es 
insuperable, desde hace un tiempo se dedican a copiar todas sus caracteristicas. Internet 
Explorer 8, Safari 3 y Opera 9 disponen de herramientas de depuration que son una replica de 
Firebug. 

Internet Explorer 8 ha denominado a su herramienta Developer Tools 
(http://msdn.microsoft.com/en-us/library/cc848894(VS.85).aspx) , mientras que Opera la ha 
denominado Dragonfly (http://www.opera.com/products/dragonfly/) y en Safari esta 
disponible desde el menu Desarrollo. 

2.5. Hojas de estilos 

Las hojas de estilos reales de los sitios web profesionales suelen contener cientos de reglas y 
ocupan miles de lineas. Por este motivo, es imprescindible seguir unas buenas practicas al crear 
las hojas de estilos para mejorar la producitivdad y reducir los posibles errores. A continuacion 
se muestran algunas de las recomendaciones mas utiles para crear hojas de estilos 
profesionales. 

2.5.1. Llaves 

Uno de los elementos basicos que los disenadores web deben acordar es el tipo de llaves que se 
utilizan para encerrar la declaracion de cada regia CSS. Aunque se utilizan muchos modelos 
diferentes, a continuacion se muestran los mas populares. 

Llave de apertura en la misma linea del selector y have de cierre en una nueva linea para separar 
unas reglas de otras: 

selector { 

propiedadl: valorl; 
propiedad2: valor2; 

} 

Una variante del modelo anterior consiste en mostrar cada llave en su propia linea, para separar 
aun mas el selector de su declaracion. Este modelo lo utilizan normalmente los programadores 
web: 

selector 

{ 

propiedadl: valorl; 


www.librosweb.es 


57 



CSS avanzado 


Capftulo 2. Buenas practicas 


I propiedad2: valor2; 

| } 

Por ultimo, existe un modelo compacto que no crea nuevas lineas para las Haves. Aunque es 
mucho mas compacto, normalmente es mas dificil de leer: 

selector { 

propiedadl: valorl; 
propiedad2: valor2; } 

2.5.2. Tabulaciones 

Tabular el codigo facilita significativamente su lectura, por lo que tabular las propiedades CSS es 
una de las mejores practicas de los disenadores web profesionales. Como conocen la mayoria de 
programadores, no es recomendable insertar tabuladores en el codigo, sino que se deben 
emplear 2 o 4 espacios en bianco. 

/* Propiedades sin tabular */ 
selector { 
propiedadl: valorl; 
propiedad2: valor2; 

} 

/* Propiedades tabuLadas con 2 espacios */ 
selector { 

propiedadl: valorl; 
propiedad2: valor2; 

} 

Extendiendo la practica de tabular las propiedades, algunos disenadores recomiendan tabular 
tambien las reglas CSS relacionadas. El siguiente ejemplo muestra tres reglas CSS relacionadas 
entre si: 
ul { 

margin: lem 0; 
padding: 0; 

} 

ul 11 { 

list-style-type: square; 

} 

ul 11 ul { 
font-style: Italic; 
list-style-type: disc; 

} 

La recomendacion consiste en tabular las reglas CSS que estan relacionadas porque sus 
selectores estan anidados. Por tanto, la regia cuyo selector es ul li deberia estar tabulada 
respecto de la regia ul y de la misma forma la regia cuyo selector es ul li ul deberia estar 
tabulada respecto de ul li: 
ul { 

margin: lem 0; 
padding: 0; 

} 
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ul li { 

list-style-type: square; 

} 

ul li ul { 

font-style: italic; 
list-style-type: disc; 

} 

2.5.3. Propiedades 

Cuando se establece la misma propiedad en varios selectores diferentes pero relacionados, se 
recomienda escribir las reglas CSS en una unica linea, para facilitar su lectura: 

#contenedor #principal hi { font-size: 2em; } 

#contenedor #principal h2 { font-size: 1.8em; } 

#contenedor #principal h3 { font-size: 1.6em; } 

Cuando en el caso anterior las propiedades y/o selectores no ocupan el mismo sitio, se pueden 

utilizar espacios en bianco para crear una estructura similar a las columnas de una tabla: 

hi { color: #000; text-align: center; } 

#principal h2 { color: #C0C0C0; font-size: 1.8em; } 

#lateral blockquote { font-size: 0.9em; text-align: justify; } 

Respecto al orden en el que se indican las propiedades en la declaration, algunos disenadores 
recomiendan agruparlas por su funcionalidad: 
selector { 

position: absolute; /* propiedades de posicionamiento */ 
right: 0; 
bottom: 10px; 

width: 300px; /* propiedades de tamano */ 

height: 250px; 

color: #000; /* propiedades tipograficas V 

font-size: 2em; 

} 

Otros disenadores recomiendan ordenar alfabeticamente las propipedades para facilitar su 
busqueda y evitar duplicidades: 

selector { 
bottom: 10px; 
color: #000; 
font-size: 2em; 
height: 250px; 
position: absolute; 
right: 0; 
width: 300px; 

} 
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2.5.4. Selectores 

Los selectores deben ser descriptivos para facilitar la lectura de la hoja de estilos, por lo que hay 
que poner especial cuidado en elegir el nombre de los atributos id y class. Ademas, aunque 
aumenta el tamano total de la hoja de estilos, se recomienda utilizar selectores lo mas 
especificos posible para facilitar el mantenimiento de la hoja de estilos: 

I p.especial { ... } /* poco especi.fi.co */ 

| #contenedor #principal p.especial { ... } /* muy especifico */ 

Por otra parte, cuando una regia CSS tiene varios selectores largos, es mejor colocar cada 
selector en su propia linea: 

#contenedor hi, 

#contenedor #principal h2, 

#contenedor #lateral blockquote { 
color: #000; 

font-family: arial, sans-serif; 

} 

2.5.5. Organization 

Cuando una hoja de estilos tiene cientos de reglas, es recomendable dividirla en secciones para 
facilitar su mantenimiento. Aunque no existe ninguna organization seguida por todos los 
disenadores, en general se utilizan las siguientes secciones: 

■ Estilos basicos (estilos de <body>, tipo de letra por defecto, margenes de <ul>, <ol> y <li>, 
estilos de los enlaces, etc.) 

■ Estilos de la estructura o layout (anchura, altura y position de la cabecera, pie de pagina, 
zonas de contenidos, menus de navegacion, etc.) 

■ Estilos del menu de navegacion 

■ Estilos de cada una de las zonas (elementos de la cabecera, titulares y texto de la zona de 
contenidos, enlaces, listas e imagenes de las zonas laterales, etc.) 

Si la hoja de estilos tiene muchas secciones, algunos disenadores incluyen un rndice o tabla de 
contenidos al principio del todo. En la hoja de estilos del sitio web mozilla.org 
(http://www.mozilla.org/css/base/content.css) utilizan la siguiente tabla de contenidos: 

/* TOC: 

Random HTML StyLes 
Forms 

General Structure 

Navigation 

Quotations 

Comments and Other Asides 
Emphasis 

Computers - GeneraL 
Code 

Examples and Figures 
Q and A (FAQ) 

Tables 


www.librosweb.es 


60 



CSS avanzado 


Capftulo 2. Buenas practicas 


Headers 

Meta 

Specific to Products Pages 
V 

Otra recomendacion relacionada con la organizacion de las hojas de estilos es la de utilizar 
siempre los mismos nombres para los mismos elementos. Si observas las hojas de estilos de los 
disenadores profesionales, veras que siempre llaman #cabecera o #header o #hd a la cabecera de 
la pagina, #contenidos o #principal a la zona principal de contenidos y asi sucesivamente. 

Algunos de los atributos id mas utilizados en los disenos web son: cabecera, cuerpo, pie, 
contenidos, principal, secundario, lateral, buscador, contacto, logo. 

2.5.6. Comentarios 

Separar las secciones de la hoja de estilos y otros bloques importantes es mucho mas facil 
cuando se incluyen comentarios. Por este motivo se han defmido decenas de tipos diferentes de 
comentarios separadores. 

El modelo basico solo anade un comentario destacado para el inicio de cada seccion importante: 

/* .V 

/*.»> CONTENEDOR «< .*/ 

/* .V 

Otros disenadores emplean diferentes comentarios para indicar el comienzo de las secciones y el 
de las partes importantes dentro de una seccion: 

/* . 

CABECERA 

.V 


/* Logotipo 

.V 

/* Buscador 

.V 


Combinando los comentarios y la tabulation de reglas, la estructura de la hoja de estilos esta 
completamente ordenada: 

/* . 

CABECERA 

.V 

#cabecera { 


} 


/* Logotipo 
#cabecera #logo { 
} 


V 
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/* Buscador 

.V 

#cabecera #buscador { 

} 

2.6. Rendimiento 

Antes de su explication detallada, se muestra a continuation la lista de estrategias utiles para 
mejorar el rendimiento de la parte de CSS de las paginas web: 

■ Utilizar sprites CSS para reducir el numero de imagenes de adorno a una unica imagen. 

■ No utilizar expresiones (expressionQ) en las hojas de estilos. El navegador Internet 
Explorer revalua continuamente el valor de las expresiones y puede penalizar el 
rendimiento de la pagina. 

■ No utilizar los filtros de Internet Explorer, ya que algunos filtros como AlphalmageLoader 
bloquean la carga de la pagina hasta que no se descarga la imagen utilizada por el filtro. 

■ Enlazar hojas de estilos externas en vez de incluir los estilos en la propia pagina. 

■ Enlazar las hojas de estilos mediante <link> en vez de @import (en Internet Explorer las 
reglas @import tienen el mismo efecto que enlazar los archivos CSS al final de la pagina). 

■ Reducir el numero de archivos CSS de la pagina. 

■ Combinar si es posible todos los archivos CSS individuates en un unico archivo CSS. 

■ Reducir el tamano de las hojas de estilos comprimiendo los archivos con las herramientas 
disponibles (CSS Tidy, YUI Compressor). 

■ Comprimir los archivos CSS en el servidor web antes de enviarlos al usuario. 

Segun los estudios realizados por Yahoo! y publicados en el articulo Performance Research, Part 
1: What the 80/20 Rule Tells Us about Reducing HTTP Requests (http://yuiblog.com/blog/2006/ 
11/28/performance-research-part-l/) , del tiempo total que el usuario espera hasta que la 
pagina solicitada se carga completamente, el 20% del tiempo corresponde a la parte del servidor 
(normalmente generar la pagina HTML de forma dinamica utilizado information de una base de 
datos) y el 80% restante corresponde a la parte del cliente (normalmente descargar hojas de 
estilos CSS, archivos JavaScript e imagenes). 

De esta forma, es mucho mas facil mejorar el tiempo de respuesta de la pagina mejorando el 
rendimiento de la parte del cliente. Como uno de los principales elementos de la parte del cliente 
esta formado por las hojas de estilos CSS, a continuation se indican algunas de las tecnicas para 
mejorar su rendimiento. 

En primer lugar, en los estudios realizados por Yahoo! se demuestra que aproximadamente el 
20% de las paginas vistas de un sitio web no disponen de sus elementos guardados en la cache 
del navegador del usuario. Esto supone que en el 20% de las paginas vistas, los navegadores de 
los usuarios se descargan todos sus elementos: imagenes, archivos JavaScript y hojas de estilos 
CSS. 
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La conclusion de lo anterior es que resulta mucho mejor reducir el numero de archivos 
diferentes y no reducir el tamano de cada archivo individual. El objetivo es reducir el numero de 
peticiones HTTP que la pagina realiza al servidor para descargar todos los contenidos. 

Los navegadores limitan el numero de peticiones HTTP simultaneas que se pueden realizar a un 
mismo servidor. Aunque el numero maximo de peticiones varia de un navegador a otro, el limite 
se encuentra entre 2 y 8. Por tanto, si el limite del navegador son 2 peticiones HTTP simultaneas, 
cuando el navegador realice 2 peticiones, la descarga de la pagina se bloquea hasta que alguna 
de las peticiones concluya. 

Como demuestran los estudios realizados por Yahoo!, la descarga de las paginas web se realiza a 
saltos, descargando cada vez 2, 4 o 6 elementos de la pagina. Por este motivo es fundamental 
reducir el numero de elementos de la pagina, entre ellos el numero de hojas de estilos CSS, para 
reducir el numero de peticiones HTTP necesarias. 

La recomendacion de reducir el numero de hojas de estilos CSS entra en conflicto con la 
recomendacion de modularizar el diseno CSS del sitio web separando de forma logica todos sus 
estilos en varios archivos individuales. 

La solution consiste en combinar todos los archivos CSS individuales en un unico archivo CSS. 
Aunque la hoja de estilos resultante tiene un tamano muy grande, el numero de peticiones HTTP 
requeridas para la parte de CSS se reduce al minimo posible. 

El siguiente paso consiste en reducir el tamano de esa unica hoja de estilos grande. Como los 
archivos CSS normales incluyen muchos espacios en bianco, nuevas lineas, comentarios y 
propiedades no optimizadas, es muy sencillo reducir su tamano de forma considerable 
eliminando todos los elementos sobrantes. 

Yahoo! ha desarrollado una herramienta llamada YUI compressor (http://developer.yahoo.com/ 
yui/compressor/) que permite reducir de forma segura el tamano de los archivos JavaScript y 
CSS. Su uso no es muy comodo para los disenadores web, ya que requiere el uso de Java y la linea 
de comandos. 

Otra herramienta similar a la anterior es CSSTidy (http://csstidy.sourceforge.net/), que permite 
reducir el tamano de los archivos CSS eliminando los elementos sobrantes (comentarios, 
espacios en bianco, nuevas lineas) y optimizando las reglas CSS (sustituir propiedades 
individuales por propiedades shorthand, utilizar la notation abreviada de numeros y colores, 
etc.) CSS Tidy es una herramienta gratuita disponible para todos los sitemas operativos, se puede 
utilizar mediante la linea de comandos y tambien se puede integrar con el lenguaje de 
programacion PHP. 

Ademas de las herramientas descargables, existen aplicaciones online que permiten reducir 
facilmente el tamano del codigo CSS indicado. Una de las aplicaciones mas conocidas es Clean 
CSS (http://www.cleancss.com/), que utiliza internamente CSS Tidy. 

2.7. Recursos imprescindibles 

El trabajo de los disenadores web se visualiza a traves de un navegador web la mayoria de las 
ocasiones. Por este motivo, los disenadores siempre estan limitados por las capacidades de los 
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navegadores. Ademas, los disenadores tambien estan expuestos a los errores que comete cada 
version de cada navegador. 

De esta forma, es imprescindible disponer de recursos para conocer las limitaciones y errores de 
cada navegador. A continuation se indica la localization de la documentation tecnica oficial de 
cada navegador. 

Informacion tecnica general para disenadores y programadores web: 

■ Internet Explorer (http://msdn.microsoft.com/en-us/ie/default.aspx) 

■ Firefox (http://developer.mozilla.org/en/Main_Page) 

■ Safari (http://developer.apple.com/internet/safari/) 

* Opera (http://www.opera.com/docs/specs/) 

Informacion tecnica especifica de CSS: 

■ Internet Explorer (http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx) 

■ Firefox (http://developer.mozilla.org/en/CSS_Reference) 

■ Safari (http://developer.apple.com/internet/safari/safari_css.html) 

■ Opera (http://www.opera.com/docs/specs/css/) 

A1 margen de las referencias oficiales, existen sitios como http://positioniseverything.net/ que 
publican articulos tecnicos sobre los errores mas conocidos de cada navegador. 
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Capftulo 3. Selectores 

Conocer y dominar todos los selectores de CSS es imprescindible para crear disenos web 
profesionales. El estandar de CSS 2.1 incluye una docena de tipos diferentes de selectores, que 
permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos 
dentro de una pagina web. 

Utilizando solamente los cinco selectores basicos de CSS 2.1 (universal, de tipo, descendente, de 
clase y de id) es posible disenar cualquier pagina web. No obstante, los selectores avanzados de 
CSS 2.1 permiten simplificar las reglas CSS y tambien el codigo HTML. 

Desafortunadamente, los navegadores obsoletos como Internet Explorer 6 y sus versiones 
anteriores no soportan este tipo de selectores avanzados, por lo que su uso no era comun hasta 
hace poco tiempo. Hoy en dia, todos los navegadores mas utilizados soportan los selectores 
avanzados de CSS 2.1 y algunos de ellos tambien soportan la mayoria o todos los selectores 
propuestos por la futura version CSS 3. 

3.1. Selector de hijos 

Se trata de un selector similar al selector descendente, pero muy diferente en su funcionamiento. 
Se utiliza para seleccionar un elemento que es hijo de otro elemento y se indica mediante el 
"signo de mayor que" (>). 

Mientras que en el selector descendente solo importa que un elemento este dentro de otro, 
independientemente de lo profundo que se encuentre, en el selector de hijos el elemento debe 
ser hijo directo de otro elemento. 

I p > span { color: blue; } 


<P> 

<span>Textol</span> 

</p> 

<P> 

<a href="#"> 

<span>Texto2</span> 

</a> 

</p> 

En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento <span> que 
sea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple la condition 
del selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendiente 
pero no es hijo directo de un elemento <p>. 

Utilizando el mismo ejemplo anterior se pueden comparar las diferencias entre el selector 
descendente y el selector de hijos: 

I p a { color: red; } 

| p > a { color: red; } 
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<P> 

<a href="#">Enlacel</a> 

</p> 

<P> 

<span> 

<a href="#">Enlace2</a> 

</span> 

</p> 

El primer selector es de tipo descendente (p a) y por tanto se aplica a todos los elementos <a> 
que se encuentran dentro de elementos <p>. En este caso, los estilos de este selector se aplican a 
los dos enlaces. 

El segundo selector es de hijos (p > a) por lo que obliga a que el elemento <a> sea hijo directo 
de un elemento <p>. Por tanto, los estilos del selector p > a no se aplican al segundo enlace del 
ejemplo anterior. 

3.2. Selector adyacente 

El selector adyacente se emplea para seleccionar elementos que son hermanos (su elemento 
padre es el mismo) y estan seguidos en el codigo HTML. Este selector emplea en su sintaxis el 
simbolo +. Si se considera el siguiente ejemplo: 

hi + h2 { color: red } 

<body> 

<hl>Titulol</hl> 

<h2>Subtltulo</h2> 


<h2>0tro subtitulo</h2> 

</body> 

Los estilos del selector hi + h2 se aplican al primer elemento <h2> de la pagina, pero no al 
segundo <h2>, ya que: 

■ El elemento padre de <hl> es <body>, el mismo padre que el de los dos elementos <h2>. 

Asi, los dos elementos <h2> cumplen la primera condicion del selector adyacente. 

■ El primer elemento <h2> aparece en el codigo HTML justo despues del elemento <hl>, por 
lo que este elemento <h2> tambien cumple la segunda condicion del selector adyacente. 

■ Por el contrario, el segundo elemento <h2> no aparece justo despues del elemento <hl>, 
por lo que no cumple la segunda condicion del selector adyacente y por tanto no se le 
aplican los estilos de hi + h2. 

El siguiente ejemplo puede ser util para los textos que se muestran como libros: 

| p + p { text-indent: 1.5em; } 
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En muchos libros es habitual que la primera linea de todos los parrafos este indentada, salvo la 
primera linea del primer parrafo. El selector p + p selecciona todos los parrafos que estan 
dentro de un mismo elemento padre y que esten precedidos por otro parrafo. En otras palabras, 
el selector p + p selecciona todos los parrafos de un elemento salvo el primer parrafo. 

El selector adyacente requiere que los dos elementos sean hermanos, por lo que su elemento 
padre debe ser el mismo. Si se considera el siguiente ejemplo: 
p + p { color: red; } 

<p>Lorem ipsum dolor sit amet...</p> 

<p>Lorem ipsum dolor sit amet...</p> 

<div> 

<p>Lorem ipsum dolor sit amet...</p> 

</div> 

En el ejemplo anterior, solamente el segundo parrafo se ve de color rojo, ya que: 

■ El primer parrafo no va precedido de ningun otro parrafo, por lo que no cumple una de las 
condiciones de p + p 

■ El segundo parrafo va precedido de otro parrafo y los dos comparten el mismo padre, por 
lo que se cumplen las dos condiciones del selector p + p y el parrafo muestra su texto de 
color rojo. 

■ El tercer parrafo se encuentra dentro de un elemento <div>, por lo que no se cumple 
ninguna condition del selector p + p ya que ni va precedido de un parrafo ni comparte 
padre con ningun otro parrafo. 

3.3. Selector de atributos 

El ultimo tipo de selectores avanzados lo forman los selectores de atributos, que permiten 
seleccionar elementos HTML en funcion de sus atributos y/o valores de esos atributos. 

Los cuatro tipos de selectores de atributos son: 

* [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado 
nombre_atributo, independientemente de su valor. 

■ [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo 
llamado nombre_atributo con un valor igual a valor. 

■ [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo 
llamado nombre_atributo y cuyo valor es una lista de palabras separadas por espacios en 
bianco en la que al menos una de ellas es exactamente igual a valor. 

■ [nombre_atributo | =valor], selecciona los elementos que tienen establecido un atributo 
llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, 
pero que comienza con valor. Este tipo de selector solo es util para los atributos de tipo 
lang que indican el idioma del contenido del elemento. 

A continuation se muestran algunos ejemplos de estos tipos de selectores: 
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/* Se muestran de color azul todos Los enlaces que tengan 
un atributo "class", independientemente de su valor */ 
a[class] { colon: blue; } 

/* Se muestran de color azul todos Los enlaces que tengan 
un atributo "class" con el valor "externo" */ 
a[class="externo"] { color: blue; } 

/* Se muestran de color azul todos Los enLaces que apunten 
al sitio "http://uiAiw.ejempLo.com" */ 
a[href="http://www.ejemplo.com"] { color: blue; } 

/* Se muestran de color azul todos Los enlaces que tengan 
un atributo "class" en el que al menos uno de sus valores 
sea "externo" */ 

a[class~="externo"] { color: blue; } 

/* SeLecciona todos Los elementos de La pagina cuyo atributo 

"Lang" sea igual a "en", es decir, todos Los elementos en ingles */ 

*[lang=en] { ... } 

/* SeLecciona todos Los elementos de La pagina cuyo atributo 

"Lang" empiece por "es", es decir, "es", "es-ES", "es-AR", etc. */ 

*[lang|="es"] { color : red } 

3.4. Pseudo-clases 

3.4.1. La pseudo-clase :first-child 

La pseudo-clase :first-child selecciona el primer elemento hijo de un elemento. Si se 
considera el siguiente ejemplo: 

p em:first-child { 
color: red; 

} 


<p>Lorem <spanxem>ipsum dolor</emx/span> sit amet, consectetuer adipiscing elit. 
Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim. Praesent nulla 
ante, <em>ultricies</em> id, porttitor ut, pulvinar quis, dui.</p> 

El selector p em:first-child selecciona el primer elemento <em> que sea hijo de un elemento y 
que se encuentre dentro de un elemento <p>. Por tanto, en el ejemplo anterior solo el primer 
<em> se ve de color rojo. 

La pseudo-clase :first-child tambien se puede utilizar en los selectores simples, como se 
muestra a continuation: 

| p:first-child { ... } 

La regia CSS anterior aplica sus estilos al primer parrafo de cualquier elemento. Si se modifica el 
ejemplo anterior y se utiliza un selector compuesto: 

I p:first-child em { 

| color: red; 
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} 


<body> 

<p>Lorem <spanxem>ipsum dolor</emx/span> sit amet, consectetuer adipiscing elit. 
Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p> 

<p>Lorem <spanxem>ipsum dolor</emx/span> sit amet, consectetuer adipiscing elit. 
Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p> 

<div> 

<p>Lorem <spanxem>ipsum dolor</emx/span> sit amet, consectetuer adipiscing elit. 
Praesent odio sem, tempor quis, <em>auctor eu</em>, tempus at, enim.</p> 

</div> 

</body> 

El selector p:first-child em selecciona todos aquellos elementos <em> que se encuentren 
dentro de un elemento <p> que sea el primer hijo de cualquier otro elemento. 

El primer parrafo del ejemplo anterior es el primer hijo de <body>, por lo que sus <em> se ven de 
color rojo. El segundo parrafo de la pagina no es el primer hijo de ningun elemento, por lo que 
sus elementos <em> interiores no se ven afectados. Por ultimo, el tercer parrafo de la pagina es el 
primer hijo del elemento <div>, por lo que sus elementos <em> se ven de la misma forma que los 
del primer parrafo. 

3.4.2. Las pseudo-clases :link y :visited 

Las pseudo-clases :link y : visited se pueden utilizar para aplicar diferentes estilos a los 
enlaces de una misma pagina: 

■ La pseudo-clase : link se aplica a todos los enlaces que todavia no han sido visitados por 
el usuario. 

■ La pseudo-clase : visited se aplica a todos los enlaces que han sido visitados al menos una 
vez por el usuario. 

El navegador gestiona de forma automatica el cambio de enlace no visitado a enlace visitado. 
Aunque el usuario puede borrar la cache y el historial de navegacion de forma explicita, los 
navegadores tambien borran de forma periodica la lista de enlaces visitados. 

Por su propia definition, las pseudo-clases :link y : visited son mutuamente excluyentes, de 
forma que un mismo enlace no puede estar en los dos estados de forma simultanea. 

Como los navegadores muestran por defecto los enlaces de color azul y los enlaces visitados de 
color morado, es habitual modificar los estilos para adaptarlos a la guia de estilo del sitio web: 

I a:link { color: red; } 

| a:visited { color: green; } 

3.4.3. Las pseudo-clases rhover, :active y :focus 

Las pseudo-clases : hover, : active y :focus permiten al disenador web variar los estilos de un 
elemento en respuesta a las acciones del usuario. Al contrario que las pseudo-clases :link y 
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: visited que solo se pueden aplicar a los enlaces, estas pseudo-clases se pueden aplicar a 
cualquier elemento. 

A continuation se indican las acciones del usuario que activan cada pseudo-clase: 

■ : hover, se activa cuando el usuario pasa el raton o cualquier otro elemento apuntador por 
encima de un elemento. 

■ : active, se activa cuando el usuario activa un elemento, por ejemplo cuando pulsa con el 
raton sobre un elemento. El estilo se aplica durante un espacio de tiempo practicamente 
imperceptible, ya que solo dura desde que el usuario pulsa el boton del raton hasta que lo 
suelta. 

■ : focus, se activa cuando el elemento tiene el foco del navegador, es decir, cuando el 
elemento esta seleccionado. Normalmente se aplica a los elementos <input> de los 
formularios cuando estan activados y por tanto, se puede escribir directamente en esos 
campos. 

De las definiciones anteriores se desprende que un mismo elemento puede verse afectado por 
varias pseudo-clases diferentes de forma simultanea. Cuando se pulsa por ejemplo un enlace que 
fue visitado previamente, al enlace le afectan las pseudo-clases : visited, : hover y : active. 

Debido a esta caracteristica y al comportamiento en cascada de los estilos CSS, es importante 
cuidar el orden en el que se establecen las diferentes pseudo-clases. El siguiente ejemplo 
muestra el unico orden correcto para establecer las cuatro pseudo-clases principales en un 
enlace: 

a:link { ... } 
a:visited { ... } 
a:hover { ... } 
a:active { ... } 

Los navegadores obsoletos como Internet Explorer 6 y sus versiones anteriores no son capaces 
de aplicar estas pseudo-clases a los elementos que no sean enlaces. 

Por ultimo, tambien es posible aplicar estilos combinando varias pseudo-clases compatibles 
entre si. La siguiente regia CSS por ejemplo solo se aplica a aquellos enlaces que estan 
seleccionados y en los que el usuario pasa el raton por encima: 

| a:focus:hover { ... } 

3.4.4. La pseudo-clase rlang 

La pseudo-clase :lang se emplea para seleccionar elementos en funcion de su idioma. Los 
navegadores utilizan los atributos lang, las etiquetas <meta> y la information de la respuesta del 
servidor para determinar el idioma de cada elemento. 

Si se considera el siguiente ejemplo: 

I p { color: blue; } 
p:lang(es) { color: redj } 
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Los parrafos del ejemplo anterior se ven de color azul, salvo los parrafos cuyo contenido este 
escrito en espanol, que se ven de color rojo. 

Como los navegadores actuates no son capaces de inferir el idioma de un elemento a partir de su 
contenido, el uso de esta clase esta muy limitado salvo que la pagina utilice de forma explicita los 
atributos lang: 

<p lang="en">Lorem ipsum dolor sit amet...</p> 

<div lang="fr"> 

<p>Lorem ipsum dolor sit amet...</p> 

<p lang="es_ES">Lorem ipsum dolor sit amet...</p> 

</div> 

<p lang="en">Lorem ipsum dolor sit amet...</p> 

<ul> 

<li lang="fr">Lorem ipsum dolor sit amet...</li> 

</ul> 

La pseudo-clase :lang(xx) es muy diferente al selector de atributos [lang|=xx], tal y como 
muestran las siguientes reglas: 

*[lang|=es] { ... } /* seLector de atributo */ 

*:lang(es) { ... } /* pseudo-cLase */ 

<body lang="es"> 

<p>Lorem ipsum dolor sit amet...</p> 

</body> 

El selector *[lang|=es] selecciona todos los elementos de la pagina que tengan un atributo 
llamado lang cuyo valor empiece por es. En el ejemplo anterior, solamente el elemento <body> 
cumple con la condicion del selector. 

Por otra parte, el selector *:lang(es) selecciona todos los elementos de la pagina cuyo idioma 
sea el espanol, sin tener en cuenta el metodo empleado por el navegador para averiguar el 
idioma de cada elemento. En este caso, tanto el elemento <body> como el elemento <p> cumplen 
esta condicion. 

3.5. Pseudo-elementos 

Los selectores de CSS, las pseudo-clases y todos los elementos HTML no son suficientes para 
poder aplicar estilos a algunos elementos especiales. Si se desea por ejemplo cambiar el estilo de 
la primera linea de texto de un elemento, no es posible hacerlo con las utilidades anteriores. 

La primera linea del texto normalmente es variable porque el usuario puede aumentar y 
disminuir la ventana del navegador, puede disponer de mas o menos resolution en su monitor y 
tambien puede aumentar o disminuir el tamano de letra del texto. 

La unica forma de poder seleccionar estos elementos especiales es mediante los 
pseudo-elementos definidos por CSS para este proposito. 
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3.5.1. El pseudo-elemento :first-line 

El pseudo-elemento :first-line permite seleccionar la primera lfnea de texto de un elemento. 
Asf, la siguiente regia CSS muestra en mayusculas la primera lfnea de cada parrafo: 

| p:first-line { text-transform: uppercase; } 

Este pseudo-elemento solo se puede utilizar con los elementos de bloque y las celdas de datos de 
las tablas. 

Se pueden combinar varios pseudo-elementos de tipo :first-line para crear efectos 
avanzados: 

div:first-line { color: red; } 
p:first-line { text-transform: uppercase; } 

<div> 

<p>Lorem ipsum dolor sit amet...</p> 

<p>Lorem ipsum dolor sit amet...</p> 

<p>Lorem ipsum dolor sit amet...</p> 

</div> 

En el ejemplo anterior, la primera lfnea del primer parrafo tambien es la primera lfnea del 
elemento <div>, por lo que se le aplican las dos reglas CSS y su texto se ve en mayusculas y de 
color rojo. 

3.5.2. El pseudo-elemento :first-letter 

El pseudo-elemento :first-letter permite seleccionar la primera letra de la primera lfnea de 
texto de un elemento. De esta forma, la siguiente regia CSS muestra en mayusculas la primera 
letra del texto de cada parrafo: 

| p:first-letter { text-transform: uppercase; } 

Los signos de puntuacion y los caracteres como las comillas que se encuentran antes y despues 
de la primera letra tambien se ven afectados por este pseudo-elemento. 

Este pseudo-elemento solo se puede utilizar con los elementos de bloque y las celdas de datos de 
las tablas. 

3.5.3. Los pseudo-elementos :before y :after 

Los pseudo-elementos : before y : after se utilizan en combination con la propiedad content de 
CSS para anadir contenidos antes o despues del contenido original de un elemento. 

Las siguientes reglas CSS anaden el texto Capltulo - delante de cada tftulo de section <hl> y el 
caracter . detras de cada parrafo de la pagina: 

I hi:before { content: "Capltulo - "; } 

| p:after { content: } 

El contenido insertado mediante los pseudo-elementos : before y : after se tiene en cuenta en 
los otros pseudo-elementos :first-liney :first-letter. 
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3.6. Selectores de CSS 3 

La futura version CSS 3 incluye todos los selectores de CSS 2.1 y anade otras decenas de 
selectores, pseudo-clases y pseudo-elementos. La lista provisional de novedades y su explication 
detallada se puede encontrar en el modulo de selectores de CSS 3 (http://www.w3.org/TR/ 
css3-selectors/). 

En primer lugar, CSS 3 anade tres nuevos selectores de atributos: 

■ elemento[atributo A ="valor"], selecciona todos los elementos que disponen de ese 
atributo y cuyo valor comienza exactamente por la cadena de texto indicada. 

■ elemento[atributo$="valor"], selecciona todos los elementos que disponen de ese 
atributo y cuyo valor termina exactamente por la cadena de texto indicada. 

■ elemento[atributo*="valor"], selecciona todos los elementos que disponen de ese 
atributo y cuyo valor contiene la cadena de texto indicada. 

De esta forma, se pueden crear reglas CSS tan avazadas como las siguientes: 

/* SeLeccxona todos Los enLaces que apuntan a una direccion de correo eLectronico V 
a[href A ="mailto:"] { ... } 

/* SeLeccxona todos Los enLaces que apuntan a una pagina HTML */ 
a[hnef$=".html"] { ... } 

/* SeLeccxona todos Los tituLos hi cuyo atributo titLe contenga La paLabra "capituLo" */ 
hl[title*="caprtulo"] { ... } 

Otro de los nuevos selectores de CSS 3 es el "selector general de elementos hermanos", que 
generaliza el selector adyacente de CSS 2.1. Su sintaxis es elementol ~ elemento2 y selecciona 
el elemento2 que es hermano de elementol y se encuentra detras en el codigo HTML. En el 
selector adyacente la condicion adicional era que los dos elementos debian estar uno detras de 
otro en el codigo HTML, mientras que ahora la unica condicion es que uno este detras de otro. 

Si se considera el siguiente ejemplo: 

hi + h2 { ... } /* seLector adyacente */ 

hi ~ h2 { ... } /* seLector generaL de hermanos */ 

<hl>...</hl> 

<h2>...</h2> 

<p>...</p> 

<div> 

<h2>...</h2> 

</div> 

<h2>...</h2> 

El primer selector (hi + h2) solo selecciona el primer elemento <h2> de la pagina, ya que es el 
unico que cumple que es hermano de <hl> y se encuentra justo detras en el codigo HTML. Por su 

parte, el segundo selector (hi ~ h2) selecciona todos los elementos <h2> de la pagina salvo el 

segundo. Aunque el segundo <h2> se encuentra detras de <hl> en el codigo HTML, no son 
elementos hermanos porque no tienen el mismo elemento padre. 
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Los pseudo-elementos de CSS 2.1 se mantienen en CSS 3, pero cambia su sintaxis y ahora se 
utilizan :: en vez de : delante del nombre de cada pseudo-elemento: 

■ :: first-line, selecciona la primera linea del texto de un elemento. 

■ :: first-letter, selecciona la primera letra del texto de un elemento. 

■ :: before, selecciona la parte anterior al contenido de un elemento para insertar nuevo 
contenido generado. 

■ :: after, selecciona la parte posterior al contenido de un elemento para insertar nuevo 
contenido generado. 

CSS 3 anade ademas un nuevo pseudo-elemento: 

■ :: selecion, selecciona el texto que ha seleccionado un usuario con su raton o teclado. 

Las mayores novedades de CSS 3 se producen en las pseudo-clases, ya que se anaden 12 nuevas, 
entre las cuales se encuentran: 


elemento:nth-child(numero), selecciona el elemento indicado pero con la condicion de 
que sea el hijo enesimo de su padre. Este selector es util para seleccionar el segundo 
parrafo de un elemento, el quinto elemento de una lista, etc. 

elemento: nth-last - child (numero), identico al anterior pero el numero indicado se 
empieza a contar desde el ultimo hijo. 

elemento:empty, selecciona el elemento indicado pero con la condicion de que no tenga 
ningun hijo. La condicion implica que tampoco puede tener ningun contenido de texto. 
elemento: first-child y elemento: last-child, seleccionan los elementos indicados pero 
con la condicion de que sean respectivamente los primeros o ultimos hijos de su elemento 
padre. 

elemento:nth-of-type(numero), selecciona el elemento indicado pero con la condicion de 
que sea el enesimo elemento hermano de ese tipo. 

elemento: nth-last-of-type(numero), identico al anterior pero el numero indicado se 
empieza a contar desde el ultimo hijo. 


Algunas pseudo-clases como :nth-child(numero) permiten el uso de expresiones complejas 
para realizar selecciones avanzadas: 


li:nth-child(2n+l) { ... } /* selecciona todos los elementos impares de una Lista */ 

li:nth-child(2n) { ... } /* selecciona todos Los elementos pares de una Lista */ 


/* Las siguientes 
p:nth-child(4n+l) 
p:nth-child(4n+2) 
p:nth-child(4n+3) 
p:nth-child(4n+4) 


reglas alternan cuatro estilos diferentes para Los parrafos */ 

{ ... } 

{ ••• } 

{ ••• } 

{ ••• } 


Empleando la pseudo-clase :nth-of-type(numero) se pueden crear reglas CSS que alternen la 
posicion de las imagenes en funcion de la posicion de la imagen anterior: 
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I img:nth-of-type(2n+l) { float: right; } 

| img:nth-of-type(2n) { float: left; } 

Otro de los nuevos selectores que incluira CSS 3 es :not(), que se puede utilizar para seleccionar 
todos los elementos que no cumplen con la condicion de un selector: 

:not(p) { ... } /* seLecciona todos Los elementos de La pagina que no sean parrafos */ 
:not(#especial) { ... } /* seLecciona cuaLquier eLemento cuyo atributo id no sea 
"especial" */ 

Aunque todavi'a faltan muchos anos hasta que la version CSS 3 sustituya a la actual version CSS 
2.1, los navegadores que mas se preocupan por los estandares (Opera, Safari y Firefox) incluyen 
soporte para varios o casi todos los selectores de CSS 3. 

Existe una herramienta llamada CSS Selectors test (http://www.css3.info/selectors-test/] que 
permite comprobar los selectores que soporta el navegador con el que se hace la prueba. 
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Capitulo 4. Propiedades avanzadas 

El estandar CSS 2.1 incluye 115 propiedades que abarcan el modelo de cajas (box model), la 
tipografia, las tablas, las listas, el posicionamiento de los elementos, la generation de contenidos 
y los medios impresos y auditivos. 

Aunque la mayoria de disenadores web conocen y utilizan casi todas las propiedades de CSS 2.1, 
no siempre hacen uso de todas sus posibilidades. Algunas propiedades de CSS 2.1 han sido 
infrautilizadas hasta hace poco tiempo porque los navegadores no las soportaban. 

Afortunadamente, los navegadores que mas se preocupan por los estandares (Firefox, Safari y 
Opera) ya incluyen soporte complete de casi todas las propiedades de CSS 2.1, con la unica 
exception de las propiedades relacionadas con los medios auditivos. Por su parte, Internet 
Explorer 8 promete que incluira soporte complete de todas las propiedades de CSS 2.1. 

4.1. Propiedad white-space 


Definicion 

Establece el tratamiento de los espacios en bianco 

Valores 

permitidos 

Uno y solo uno de los siguientes valores: 

■ normal * pre ■ nowrap 

■ pre-wrap ■ pre-line ■ inherit 

Valor inicial 

normal 

Se aplica a 

Todos los elementos 

Valida en 

medios visuales 

Se hereda 

si 

Definicion en 

el estandar 

http://www.w3.org/TR/CSS21/text.html#propdef-white-space 


El tratamiento de los espacios en bianco en el codigo HTML es una de las caracteristicas mas 
desconcertantes para los disenadores web que comienzan a crear paginas. A continuation se 
muestra como visualizan los navegadores dos parrafos de ejemplo: 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate 
lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit 
sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc in leo. 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate 
lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit 
sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc in leo. 
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Aunque los dos parrafos anteriores se visualizan de la misma forma, en realidad su codigo HTML 
es completamente diferente: 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus 
vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum 
tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donee mollis 
nunc in leo.</p> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor 

id ornare ultrices, ligula ipsum tincidunt pede, et blandit 

sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc in leo.</p> 

El segundo parrafo contiene numerosos espacios en bianco y saltos de linea. Sin embargo, como 
los navegadores eliminan automaticamente todos los espacios en bianco sobrantes, los dos 
parrafos se ven exactamente igual. 

En el estandar HTML un "espacio en bianco" puede ser un salto de linea, un tabulador y un 
espacio en bianco normal. Los navegadores eliminan de forma automatica todos los espacios en 
bianco sobrantes salvo el espacio en bianco que separa las palabras del texto. 

La unica exception de este comportamiento es la etiqueta <pre> de HTML, utilizada para 
mostrar texto que ya tiene formato (su nombre viene de preformateado') y que por tanto respeta 
todos los espacios en bianco y todos los saltos de linear 

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor 

id ornare ultrices, ligula ipsum tincidunt pede, et blandit 

sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc in leo. 


El codigo HTML del ejemplo anterior es: 

<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor 

id ornare ultrices, ligula ipsum tincidunt pede, et blandit 

sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc in leo.</pre> 

La propiedad white-space permite variar el comportamiento de los espacios en bianco. El 
estandar CSS 2.1 define cinco modelos diferentes de tratamiento de espacios en bianco: 

■ normal: los espacios en bianco sobrantes y los saltos de linea se eliminan. No obstante, el 
texto se muestra en tantas lineas como sea necesario para que sus contenidos no se salgan 
del elemento contenedor. 

■ pre: no se eliminan los espacios en bianco sobrantes y solo se muestran los saltos de linea 
incluidos en el texto original. Este comportamiento puede provocar que los contenidos de 
texto se salgan de su elemento contenedor. 

■ nowrap: se comporta igual que normal en los espacios en bianco, pero no anade saltos de 
linea en el texto original, por lo que los contenidos se pueden salir de su elemento 
contenedor. 
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pre-wrap: se comporta igual que pre, pero se introducen los saltos de li'nea que sean 
necesarios para que los contenidos de texto nunca se salgan de su elemento contenedor. 
pre-line: se eliminan los espacios en bianco sobrantes, pero se respetan los saltos de 
lfnea originales y se crean tantos saltos de lfnea como sean necesarios para que el 
contenido de texto no se saiga de su elemento contenedor. 


Como las explicaciones incluidas en el estandar CSS 2.1 pueden llegar a ser confusas, la siguiente 
tabla resume el comportamiento de cada valor: 


Valor 

Respeta espacios en bianco 

Respeta saltos de linea 

Ajusta las lineas 

normal 

no 

no 

si 

pre 

si 

si 

no 

nowrap 

no 

no 

no 

pre-wrap 

si 

si 

si 

pre-line 

no 

si 

si 


A continuation se muestra el efecto de cada modelo de tratamiento de espacios en bianco sobre 
un mismo parrafo que contiene espacios en bianco y saltos de lfnea y que se encuentra dentro de 
un elemento contenedor de anchura limitada: 


[white-space: normal] Lorem ipsum dolor sit 
amet, consectetuer adipiscing elit. Vestibulum 
dictum. Class aptent taciti sociosqu ad litora 
torquent per conubia nostra, per inceptos 
hymenaeos. 


[white-space: pre] Lorem ipsum dolor sit amet, 
Vestibulum dictum. Class aptent taciti s 
conubia nostra, per inceptos hymenaeos. 


consectetuer adipiscing elit. 
ibsqu ad litora torquent per 


[white-space: pre-wrap] Lorem ipsum dolor 
sit amet, consectetuer adipiscing elit. 
Vestibulum dictum. Class aptent taciti 
sociosqu ad litora torquent per 
conubia nostra, per inceptos hymenaeos. 


[white-space: nowrap] Lorem ipsum dolor sit apet, consectetuer adipiscing elit. Vestibulum dictum. Clas: 
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[white-space: pre-line] Lorem ipsum dolor 
sit amet, consectetuer adipiscing elit. 
Vestibulum dictum. Class aptent taciti sociosqu 
ad litora torquent per 
conubia nostra, per inceptos hymenaeos. 


Los valores mas utilizados son normal, pre y pre-wrap. El valor normal se puede emplear por 
ejemplo en un elemento <pre> que se quiere mostrar como si fuera un parrafo: 

<pre>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor 

id ornare ultrices, ligula ipsum tincidunt pede, et blandit 

sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc in leo.</pre> 

<pre style="white-space: normal">Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit. Sed non sem quis tellus vulputate lobortis. Vivamus 
fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit 
sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc in 
leo.</pre> 

De la misma forma, el valor pre se puede emplear en un parrafo de texto que se quiere mostrar 
como si fuera un elemento <pre>: 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus 
vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, 
et blandit sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc in leo.</p> 


<p style="white-space: pre">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor 

id ornare ultrices, ligula ipsum tincidunt pede, et blandit 

sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc in leo.</p> 


Por ultimo, el valor pre-wrap es muy util cuando se quiere mostrar un texto de la forma mas fiel 
posible a su formato original (respetando espacios en bianco y saltos de linea) pero sin que el 
contenido de texto se saiga de su elemento contenedor. 
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4.2. Propiedad display 


Definicion 

Establece el tipo de caja generada por un elemento 

Valores 

permitidos 

Uno y solo uno de los siguientes valores: 

■ inline ■ block ■ list-item 

■ run-in ■ inline-block ■ table 

■ inline-table ■ table-row-group ■ table-header-group 

■ table-footer-group ■ table-row ■ table-column-group 

■ table-column ■ table-cell ■ table-caption 

■ none ■ inherit 

Valor inicial 

inline 

Se aplica a 

Todos los elementos 

Valida en 

all 

Se hereda 

no 

Definicion en 

el estandar 

http://www.w3.org/TR/CSS21/visuren.html#propdef-display 


La propiedad display es una de las propiedades CSS mas infrautilizadas. Aunque todos los 
disenadores conocen esta propiedad y utilizan sus valores inline, block y none, las 
posibilidades de display son mucho mas avanzadas. 


De hecho, la propiedad display es una de las mas complejas de CSS 2.1, ya que establece el tipo 
de la caja que genera cada elemento. La propiedad display es tan compleja que casi ningun 
navegador es capaz de mostrar correctamente todos sus valores. 

El valor mas sencillo de display es none que hace que el elemento no genere ninguna caja. El 
resultado es que el elemento desaparece por completo de la pagina y no ocupa sitio, por lo que 
los elementos adyacentes ocupan su lugar. Si se utiliza la propiedad display: none sobre un 
elemento, todos sus descendientes tambien desaparecen por completo de la pagina. 

Si se quiere hacer un elemento invisible, es decir, que no se vea pero que siga ocupando el 
mismo sitio, se debe utilizar la propiedad visibility. La propiedad display: none se utiliza 
habitualmente en aplicaciones web dinamicas creadas con JavaScript y que muestran/ocultan 
contenidos cuando el usuario realiza alguna action como pulsar un boton o un enlace. 

Los otros dos valores mas utilizados son block e inline que hacen que la caja de un elemento 
sea de bloque o en linea respectivamente. El siguiente ejemplo muestra un parrafo y varios 
enlaces a los que se les ha anadido un borde para mostrar el espacio ocupado por cada caja: 
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[ Lorem ipsum dolor sit amet, consectetuer adipiscing elit.____j 

j^Lorem ipsum (#) JJDonec mollis nunc in leo (#} \ Vivamus fermentum (#] [ 

Como el parrafo es por defecto un elemento de bloque ("block element"), ocupa todo el espacio 
disponible hasta el final de su linea, aunque sus contenidos no ocupen todo el sitio. Por su parte, 
los enlaces por defecto son elementos en linea inline element"), por lo que su caja solo ocupa el 
espacio necesario para mostrar sus contenidos. 

Si se aplica la propiedad display: inline al parrafo del ejemplo anterior, su caja se convierte 
en un elemento en lrnea y por tanto solo ocupa el espacio necesario para mostrar sus 
contenidos: 

[jdisplay: inline] Lorem j^sum_dolpr sit ametj:onsectetuer adipiscing elit. | j^Lorem ipsum 
[#] ^Donec mollis nunc in leo (#) J Vivamus fermentum (#) 

Para visualizar mas claramente el cambio en el tipo de caja, el siguiente ejemplo muestra un 
mismo parrafo largo con display : block y display: inline: 


[display: block] Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis 
tellus vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum 
tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc 
in leo. 


[display: inlinel Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis 

tellus vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt 

pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc in leo. I 


De la misma forma, si en los enlaces del ejemplo anterior se emplea la propiedad display: 
block se transforman en elementos de bloque, por lo que siempre empiezan en una nueva linea 
y siempre ocupan todo el espacio disponible en la linea, aunque sus contenidos no ocupen todo 
el sitio: 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 


! [display: block] Lorem ipsum (#) 
i [display: block] Donee mollis nunc in leo (#) 
! [display: block] Vivamus fermentum (#) 
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Uno de los valores mas curiosos de display es inline-block, que crea cajas que son de bloque y 
en lfnea de forma simultanea. Una caja de tipo inline-block se comporta como si fuera de 
bloque, pero respecto a los elementos que la rodean es una caja en lfnea. 

El enlace del siguiente ejemplo es de tipo inline-block, lo que permite por ejemplo establecerle 
un tamano mediante la propiedad width: 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate 
lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et 
blandit sem pede suscipit pede. Nulla cursus porta sem. Donee mollis nunc in leo. 


[display: 

inline-block, width: 
25%] Quisque semper, 
magna sed pharetra 
tincidunt, quam urna 
dapibus dolor, a 
dignissim sem neque 
id purus. Etiam luctus 
viverra nisi. (#) 


Integer lobortis accumsan felis. Cras venenatis. Morbi cursus, 


tellus vitae iaculis pulvinar, turpis nibh posuere nisi, sed vehicula massa orci at dui. Morbi 
pede ipsum, porta quis, venenatis et, ullamcorper in, metus. Nulla facilisi. Quisque laoreet 
molestie mi. Ut mollis elit eget urna. 


Si tu navegador soporta el valor inline-block, el ejemplo anterior se debe visualizar tal y como 
muestra la siguiente imagen: 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis. Vivamus 
fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus 


■ Tdisplay: inline-block. 

■ width: 25%1 Quisque 

■ semper, magna sed 

■ pharetra tincidunt. quam 

■ uma dapibus dolor, a 

■ dignissim sem neque id 

1 purus. Etiam luctus viverra 


porta sem. Donee mollis nunc in leo. ‘ nisi. 


Integer lobortis accumsan felis. Cras 


venenatis. Morbi cursus, tellus vitae iaculis pulvinar, turpis nibh posuere nisi, sed vehicula massa orci at dui. 
Morbi pede ipsum, porta quis, venenatis et, ullamcorper in, metus. Nulla facilisi. Quisque laoreet molestie mi. Ut 
mollis elit eget uma. 


Figura 4.1. Ejemplo del valor inline-block de la propiedad display 
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Otro de los valores definidos por la propiedad display es list-item, que hace que cualquier 
elemento de cualquier tipo se muestre como si fuera un elemento de una lista (elemento <li>). 
El siguiente ejemplo muestra tres parrafos que utilizan la propiedad display: list-item para 
simular que son una lista de elementos de tipo <ul>: 


•Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 

•Sed non sem quis tellus vulputate lobortis. 

•Vivamus fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem 
pede suscipitpede. 


A continuacion se muestra el codigo HTML del ejemplo anterior: 

<p style="display: list-item; margin-left: 2em">Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit.</p> 

<p style="display: list-item; margin-left: 2em">Sed non sem quis tellus vulputate 
lobortis.</p> 

<p style="display: list-item; margin-left: 2em">Vivamus fermentum, tortor id ornare 
ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede.</p> 

Los elementos con la propiedad display: list-item son exactamente iguales que los 
elementos <li> a efectos de su visualizacion, por lo que se pueden utilizar las propiedades de 
listas como list-style-type, list-style-image, list-style-position y list-style. 

Uno de los valores mas curiosos de la propiedad display es run-in, que genera una caja de 
bloque o una caja en linea dependiendo del contexto, es decir, dependiendo de sus elementos 
adyacentes. El comportamiento de las cajas de tipo run-in se rige por las siguientes reglas: 

■ Si la caja run-in contiene una caja de bloque, la caja run-in se convierte en una caja de 
bloque. 

■ Si despues de la caja run-in se encuentra una caja de bloque (que no este posicionada de 
forma absoluta y tampoco este posicionada de forma flotante), la caja run-in se convierte 
en una caja en linea en el interior de la caja de bloque. 

■ En cualquier otro caso, la caja run-in se convierte en una caja de bloque. 

El siguiente ejemplo muestra una misma caja de tipo run-in que se visualiza de forma muy 
diferente en funcion del tipo de caja que existe a continuacion: 


I “ “ “ “ “ | 

' [display: run-in] Lorem ipsum i[display: block] dolor sit amet, consectetuer adipiscing 
elit. 


! [disp lay: run-in] Lorem ipsum J [display: inline] dolor sit amet, consectetuer adipiscing 
e5t| 

El codigo HTML y CSS del ejemplo anterior se muestra a continuacion: 
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<p style="display: run-in; border: 2px dashed #C00;"><strong>[display: run-in]</strong> 
Lorem ipsum</p> 

<p style="display: block; border: 2px solid #000;"><strong>[display: block]</strong> 
dolor sit amet, consectetuer adipiscing elit.</p> 

<p style="display: run-in; border: 2px dashed #C00;"><strong>[display: run-in]</strong> 
Lorem ipsum</p> 

<p style="display: inline; border: 2px solid #000;"><strong>[display: inline]</strong> 
dolor sit amet, consectetuer adipiscing elit.</p> 

En la actualidad solo la ultima version del navegador Opera es capaz de mostrar correctamente 
el ejemplo anterior, tal y como muestra la siguiente imagen: 

|^[display: run-in] Lorem ipsumfldisplay: block] dolor sit amet, consectetuer adipiscing elit. j 

i- i 

! [display: run-in] Lorem ipsum ! 

i_i 

| [display: inline] dolor sit amet, consectetuer adipiscing elit. | 

Figura 4.2. Ejemplo del valor run-in de la propiedad display 

El estandar CSS 2.1 incluye un ejemplo del posible uso del valor run-in. En este ejemplo, un 
titulo de section <h3> crea una caja run-in, de forma que cuando va seguido de un parrafo, el 
titular se mete dentro del parrafo: 

<h3 style="display: run-in">Lorem ipsum dolor sit amet</h3> 

<p>Sed non sem quis tellus vulputate lobortis. Vivamus fermentum, tortor id ornare 
ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus 
porta sem. Donee mollis nunc in leo. Integer lobortis accumsan felis.</p> 

El resto de valores de la propiedad display estan relacionados con las tablas y hacen que un 
elemento se muestre como si fuera una parte de una tabla: fila, columna, celda o grupos de filas/ 
columnas. Los valores definidos por la propiedad display son inline-table, table-row-group, 
table-header-group, table-footer-group, table-row, table-column-group, table-column, 
table-cell,table-caption. 

Aunque los valores relacionados con las tablas son los mas avanzados, tambien son los que peor 
soportan los navegadores. A continuation se muestra un ejemplo con tres parrafos de texto que 
establecen la propiedad display: table-cell: 


[display: table-cell] 

Lorem ipsum dolor sit 
amet, consectetuer 
adipiscing elit. Maecenas 
non tortor. Vestibulum 
ante ipsum primis in 
faucibus orci luctus et 
ultrices posuere cubilia 
Curae; Sed fermentum 
lorem a velit. 


[display: table-cell] In 

molestie suscipit libero. 
Cras sem. Nunc non tellus 
et urna mattis tempor. 
Nulla nec tellus a quam 
hendrerit venenatis. 
Suspendisse pellentesque 
odio et est. Morbi sed nisi 
sed dui consequat 
sodales. 


[display: table-cell] Morbi sed nisi 
sed dui consequat sodales. Vivamus 
ornare felis nec est. Phasellus massa 
justo, ornare sed, malesuada a, 
dignissim a, nibh. Vestibulum vitae 
nunc at lectus euismod feugiat. Nullam 
eleifend. Class aptent taciti sociosqu 
ad litora torquent per conubia nostra, 
per inceptos himenaeos. In ut ipsum. 
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La propiedad display: table-cell hace que cualquier elemento se muestre como si fuera una 
celda de una tabla. Como en el ejemplo anterior los tres elementos <p> utilizan la propiedad 
display: table-cell, el resultado es visualmente identico a utilizar una tabla y tres elementos 
<td>. 


Si utilizas un navegador con soporte completo de CSS 2.1, el ejemplo anterior se visualiza tal y 
como muestra la siguiente imagen: 


[display: table-cell] Lorem 
ipsum dolor sit amet, 
consectetuer adipiscing elit. 
Maecenas non tortor. 
Vestibulum ante ipsum primis in 
faucibus orci luctus et ultrices 
posuere cubilia Curae; Sed 
fermentum lorem a velit. 


[display: table-cell] In molestie 
suscipit libera. Cras sem. Nunc 
non tellus et urna mattis tempor. 
Nulla nec tellus a quam hendrerit 
venenatis. Suspendisse 
pellentesque odio et est. Morbi 
sed nisi sed dui consequat 
sodales. 


[display: table-cell] Morbi sed nisi sed dui 
consequat sodales. Vivamus ornare felis 
nec est. Phasellus massa justo, ornare 
sed, malesuada a, dignissim a. nibh. 
Vestibulum vitae nunc at lectus euismod 
feugiat. Nullam eleifend. Class aptent taciti 
sociosqu ad litora torquent per conubia 
nostra, per inceptos himenaeos. In ut 
ipsum. 


Figura 4.3. Ejemplo del valor table-cell de la propiedad display 


Como los valores relacionados con las tablas hacen que cualquier elemento que no sea una tabla 
se muestre y comporte como si lo fuera, se pueden utilizar para crear los layouts de las paginas. 
Hace anos, la estructura de las paginas se definia mediante tablas, filas y columnas. Esta solution 
tiene innumerables desventajas y por eso todos los disenadores web profesionales crean la 
estructura de sus paginas mediante CSS y elementos <div>. 

No obstante, las tablas tienen algunas ventajas en su comportamiento respecto a los elementos 
<div> posicionados de forma absoluta o flotante. La principal ventaja es que todas las celdas de 
una fila siempre tienen la misma altura, por lo que si se utilizan tablas no se sufre el problema de 
las columnas de pagina con diferente altura. 

Ademas, la estructura creada con una tabla nunca se rompe, ya que las celdas de datos nunca se 
visualizan una debajo de otra cuando la ventana del navegador se hace muy pequena. Sin 
embargo, cuando se define la estructura mediante elementos <div> posicionados es posible que 
la pagina se rompa y alguna columna se muestre debajo de otros contenidos. 

Utilizando la propiedad display de forma avanzada es posible crear una estructura de pagina 
que sea semanticamente correcta, este disenada exclusivamente con CSS y que se comporte 
exactamente igual que como lo hacen las tablas. 

El siguiente codigo HTML corresponde a la estructura de una pagina con tres columnas: 

<div id="contenedor"> 

<div id="contenidos"> 

<div id="secundario"> 

Curabitur rutrum... 

</div> 

<div id="principal"> 

Lorem ipsum dolor sit amet... 

</div> 
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<div id="lateral"> 
Nam erat massa... 
</div> 

</div> 

</div> 


Utilizando las siguientes reglas CSS y la propiedad display es posible hacer que los elementos 
<div> anteriores se comporten como si fueran elementos <tr> y <td>: 

#contenedon { 
display: table; 
border-spacing: 5px; 

} 

#contenidos { 

display: table-row; 

} 

#principalj tsecundario, #lateral { 
display: table-cell; 

} 

#principal { 
width: 60%; 

} 

#secundariOj #lateral { 
width: 20%; 

} 

El elemento #contenedor se visualiza como una tabla porque se le aplica la propiedad display: 
table. De esta forma, se pueden aplicar al elemento #contenedor propiedades exclusivas de las 
tablas como border-spacing. El elemento #contenidos se visualiza como si fuese una fila de 
tabla (etiqueta <tr>). En su interior se encuentran las tres columnas de la pagina que se 
visualizan como si fueran tres elementos <td> gracias a la propiedad display: table-cell. 

A continuation se muestra el resultado obtenido al aplicar estas reglas CSS al codigo HTML 
anterior: 


Curabitur 

Lorem ipsum dolor sit amet, consectetuer 

Nam erat 

rutrum eros 

adipiscing elit. Maecenas non tortor. 

massa, 

a risus. Cum 

Vestibulum ante ipsum primis in faucibus orci 

blandit in, 

sociis 

luctus et ultrices posuere cubilia Curae; Sed 

dapibus sit 

natoque 

fermentum lorem a velit. Lorem ipsum dolor 

amet, 

penatibus et 

sit amet, consectetuer adipiscing elit. Proin 

vestibulum 

magnis dis 

sodales, enim in volutpat vehicula, leo turpis 

et, augue. 

parturient 

vehicula magna, ut rutrum arcu lorem ac 

Suspendisse 

montes, 

pede. Curabitur rutrum eros a risus. Cum 

ac risus. 

nascetur 

sociis natoque penatibus et magnis dis 


ridiculus 

parturient montes, nascetur ridiculus mus. In 


mus. In 

molestie suscipitlibero. Cras sem. Nunc non 
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molestie 

tellus et urna mattis tempor. Nulla nec tellus a 


suscipit 

quam hendrerit venenatis. Suspendisse 


libero. Cras 

pellentesque odio et est. Morbi sed nisi sed 


sem. Nunc 

dui consequat sodales. Donee porta porta 


non tellus et 

ligula. Nam erat massa, blandit in, dapibus sit 


urna mattis 

amet, vestibulum et, augue. Suspendisse ac 


tempor. 

risus. Duis semper fringilla sem. Praesent 


Nulla nec 

augue arcu, scelerisque nec, ornare 


tellus a quam 

malesuada, posuere a, neque. Nullam nulla 


hendrerit 

nisi, ultrices quis, adipiscing non, varius ut, 


venenatis. 

Suspendisse 

pellentesque 

odio et est. 

dui. Nulla viverra pellentesque sem. 



La estructura de la pagina del ejemplo anterior esta disenada exclusivamente con CSS pero se 
comporta como si fuera una tabla. Todas las columnas de la pagina tienen la misma altura sin 
necesidad de recurrir a ningun truco y la pagina nunca se rompe por muy pequena que se haga 
la ventana del navegador. 

Si visualizas esta pagina con un navegador que soporte correctamente la propiedad display de 
CSS 2.1, el ejemplo anterior se ve tal y como muestra la siguiente imagen: 


Curabitur rutrum 

Lorem ipsum dolor sit amet, consectetuer adipiscing eKt. Maecenas 

Nam erat massa. 

eros a risus. Cum 

non tortor. Vestibulum ante ipsum prirnis in faucibus orci hictus et 

blandit in, dapibus 

sodis natoque 

ultrices posuere cubilia Curae; Sedfermentum lorem avelit. Lorem 

sit amet, vestibulum 

penatibus et magnis 

ipsum dolor sit amet, consectetuer adipiscing eHt. Proin sodales. 

et, augue. 

dis parturient 

enim in vohitpat vehicula, leo turpis vehicula magna, ut rutrum arcu 

Suspendisse ac 

monte s, nascetur 

lorem ac pede. Curabitur rutrum eros a risus. Cum sociis natoque 

risus. 

ridicuhis mus. In 

penatibus et magnis dis parturient montes, nascetur ridicuhis mus. In 


molestie suscipit 

molestie suscipit libero. Cras sem. Nunc non tellus et urna mattis 


libero. Cras sem. 

tempor. Nulla nec tellus a quam hendrerit venenatis. Suspendisse 


Nunc non tellus et 

pellentesque odio et est. Morbi sed nisi sed dui consequat sodales. 


urna mattis tempor. 

Donee porta porta ligula. Nam erat massa, blandit in, dapibus sit 


Nulla nec tellus a 

amet, vestibulum et, augue. Suspendisse ac risus. Duis semper 


quam hendrerit 

fringilla sem. Praesent augue arcu, scelerisque nec, ornare 


venenatis. 

malesuada, posuere a, neque. Nullam nulla nisi, ultrices quis. 


Suspendisse 
pellentesque odio et 
est. 

adipiscing non, varius ut, dui. Nulla viverra pellentesque sem. 



Figura 4.4. Ejemplo de los valores table, table-row y table-cell de la propiedad display 

Por ultimo, aunque el estandar CSS 2.1 establece que el valor por defecto de la propiedad 
display es inline, todos los navegadores obvian esta recomendacion y asignan por defecto el 
valor block a los elementos de bloque y el valor inline a los elementos en linea. 
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4.3. Propiedad outline 


Definition 

Establece algunas o todas las propiedades de todos los perfiles de los elementos 

Valores 

permitidos 

Alguno o todos los siguientes valores y en cualquier orden: 

■ Color de perfil (./outline-color.html) 

■ Estilo de perfil (./outline-style.html) 

■ Anchura de perfil (./outline-width.html) 

Valor inicial 

Cada propiedad define su propio valor por defecto 

Se aplica a 

Todos los elementos 

Valida en 

medios visuales, medios interactivos (./medios.html) 

Se hereda 

no 

Definition en 

el estandar 

http://www.w3.Org/TR/CSS21/ui.html#propdef-outline 


La propiedad outline es una de las "propiedades shorthand" que define CSS y que se utilizan 
para establecer de forma abreviada el valor de una o mas propiedades individuales. En este caso, 
se utiliza para establecer el mismo grosor, estilo y/o anchura de todos los perfiles de un 
elemento. 

Aunque es cierto que guarda muchas similitudes con la propiedad border, en realidad se 
diferencian en algunos aspectos muy importantes: 

1. Los perfiles no ocupan espacio, mientras que los bordes normales si. 

2. Los perfiles pueden tener formas no rectangulares. 

Desde el punto de vista del diseno, la primera caracteristica es la mas importante. Los perfiles u 
outline siempre se dibujan "por encima del elemento", por lo que no modifican la posicion o el 
tamano total de los elementos. 

En el siguiente ejemplo se muestran dos cajas; la primera muestra un borde muy grueso y la 
segunda muestra un perfil de la misma anchura: 


liv { border: 5px solid #369; } 


div { outline: 5px solid #369; } 

El perfil de la segunda caja se dibuja justo por el exterior de su borde. Aunque visualmente no lo 
parece, el perfil y el borde no se encuentran en el mismo piano. De esta forma, el perfil no se 
tiene en cuenta para calcular la anchura total de un elemento y no influye en el resto de 
elementos cercanos. 

La segunda caracteristica importante de los perfiles pueden tener formas no rectangulares. En el 
siguiente ejemplo se muestra un texto muy largo encerrado en una caja muy estrecha, lo que 
provoca que el texto se muestre en varias lineas: 
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|span { border: 

2px solid 
#369; } 

Ejemplo de 
textojargo^cjue. 

ocupa varias 
lfneas| 

span { outline: 

2px solid #369; 

} Ejemplo de 
texto largo que 
ocupa varias 
lineas 

El primer texto se encierra con un borde que produce un resultado estetico poco afortunado. 
Cada linea muestra un borde superior e inferior, aunque solo la primera y ultima lineas cierran 
el borde lateralmente. 

Mientras tanto, el segundo texto se encierra con un perfil. Como indica su nombre, la propiedad 
outline perfila los contenidos del elemento y los encierra con una forma no rectangular. No 
obstante, si visualizas esta misma pagina en diferentes navegadores, veras que todos los 
navegadores dibujan el perfil de forma diferente, al contrario de lo que sucede con el borde. 

Por este motivo, al contrario que los bordes, no existe el concepto de perfil izquierdo o perfil 
superior. El perfil de un elemento es unico y sus propiedades son identicas para cada uno de los 
cuatro lados. 

Como sucede con muchas propiedades de tipo shorthand, el orden en el que se indican los 
valores de la propiedd outline es indiferente: 

div { outline: lpx solid #C00; } 
div { outline: solid lpx #C00; } 
div { outline: #C00 lpx solid; } 
div { outline: #C00 solid lpx; } 

La propiedad outline no requiere que se indiquen las tres propiedades que definen el estilo de 
los perfiles. Si no se indica alguna propiedad, su valor se obtiene mediante el valor por defecto 
de esa propiedad. 

En el siguiente ejemplo solo se indica el estilo del perfil, por lo que el navegador asigna 
automaticamente el valor medium a su grosor y el color se escoge para que tenga el maximo 
contraste con el fondo de la pagina: 

div { outline: solid; } 
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En el siguiente ejemplo se omite el grosor del perfil, por lo que el navegador le asigna 
automaticamente el valor medium: 

div { outline: solid blue; } 

No obstante, como el valor por defecto del estilo de un perfil es none, si no se indica 
explicitamente el estilo del perfil, el resultado es que el navegador no muestra ese perfil: 

div { outline: 2px blue; } 

El grosor del perfil se puede establecer de cualquiera de las diferentes formas de indicar una 
medida en CSS. El color tambien se puede establecer de alguna de las diferentes formas de 
indicar un color en CSS, con la particularidad del valor invert que selecciona el color que tenga 
mas contraste con el color de fondo. Por ultimo, el estilo del perfil se establece con los mismos 
valores que los que se utilizan en la propiedad border-style. 

Aunque la propiedad outline es infinitamente menos utilizada que la propiedad border, la has 
visto muchas mas veces de las que crees. Si pulsas repetidamente la tecla del tabulador en una 
pagina web, el navegador va seleccionando de forma secuencial todos los elementos pinchables o 
seleccionables : enlaces, botones, controles de formulario, etc. 

Para indicar el elemento que esta seleccionado, el navegador muestra un perfil muy fino de lpx 
de ancho, de estilo punteado y del color que mas contrasta con el color de fondo de la pagina. En 
la mayoria de las paginas web, el perfil que se muestra por defecto es outline: lpx dotted 
# 000 . 


Los navegadores mas avanzados incluyen una pseudo-clase llamada : foe us que permite 
establecer el estilo de los elementos seleccionados. Utilizando la propiedad outline junto con 
:focus se puede modificar el estilo por defecto del navegador: 

<style type="text/css"> 

:focus { outline: 2px solid red; } 

</style> 

Si pruebas a pulsar repetidamente la tecla Tabulador en una pagina que incluya la regia CSS 
anterior, veras que el navegador selecciona secuencialmente los enlaces de la pagina y muestra 
un perfil continuo de color rojo para indicar el elemento que esta seleccionado en cada 
momento. 

De hecho, segun el estandar oficial, ese es el proposito para el que se crearon los perfiles: indicar 
de forma clara el elemento (boton, enlace, otros controles de formulario) que esta seleccionado 
en cada momento. 
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4.4. Propiedad quotes 


Definicion 

Establece los caracteres utilizados para mostrar las comillas 

Valores 

permitidos 

Uno y solo uno de los siguientes valores: 

■ Un numero par de cadenas de texto 

■ none 

■ inherit 

Valor inicial 

Depende de cada navegador 

Se aplica a 

Todos los elementos 

Valida en 

medios visuales 

Se hereda 

si 

Definicion en 

el estandar 

http://www.w3.Org/TR/CSS21/generate.html#propdef-quotes 


La propiedad quotes solo tiene sentido cuando se utiliza junto con la propiedad content y los 
pseudo-elementos : after y : before. La propiedad quote se puede emplear para establecer los 
caracteres que se utilizan al mostrar las comillas en un elemento. 

Por defecto, cuando se utiliza la propiedad content junto con los valores open-quote y 
close-quote, el navegador muestra unas determinadas comillas. Por tanto, si se considera el 
siguiente codigo HTML y CSS: 

blockquote:before { content: open-quote; } 
blockquote:after { content: close-quote; } 

<blockquote>Lorem ipsum dolor sit amet...</blockquote> 

El navegador muestra el ejemplo anterior de la siguiente forma: 


"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus 
vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum 
tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donee 
mollis nunc in leo." 


Si utilizas un navegador moderno con soporte de la propiedad quotes, el ejemplo anterior se 
visualiza como muestra la siguiente imagen: 

“Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis. Vivamus 
fermentum, tortor id omare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus 
porta sem. Donee mollis nunc in leo. ” 

Figura 4.5. Ejemplo de la propiedad quotes 
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La imagen anterior corresponde al navegador Firefox. Como el estandar CSS 2.1 no indica las 
comillas que se deben utilizar por defecto, se pueden producir diferencias visuales en cada 
navegador. 

La propiedad quotes se utiliza para establecer de forma explicita las comillas que debe utilizar el 
navegador y por tanto, neutraliza las posibles diferencias entre navegadores. Las comillas 
siempre se indican por pares, siendo la primera la comilla de apertura y la segunda la comilla de 
cierre. 

El siguiente ejemplo modifica el anterior para utilizar las comillas « y »: 

blockquote { 
quotes: "«" 

> 

blockquote:before { content: open-quote; } 
blockquote:after { content: close-quote; } 

<blockquote>Lorem ipsum dolor sit amet...</blockquote> 

Ahora, el navegador muestra el ejemplo anterior de la siguiente forma: 


"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus 
vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum 
tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donee 
mollis nunc in leo." 


Si se visualiza esta pagina con un navegador que soporte la propiedad quotes, el ejemplo 
anterior se visualiza como muestra la siguiente imagen: 

«Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis. Vivamus 
fermentum, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus 
porta sem. Donee mollis nunc in leo.» 

Figura 4.6. Ejemplo de la propiedad quotes 

La propiedad quotes permite indicar un numero ilimitado de pares de comillas. Cuando solo se 
define un par, se muestran siempre que se utilice open-quote y close-quote. Cuando se definen 
varios pares, se van alternando cada vez que se muestran unas comillas dentro de otro elemento 
que ya tiene comillas. Cada comilla se separa de las demas mediante un espacio en bianco, por lo 
que no debe utilizarse una coma o cualquier otro caracter de separation. 

El siguiente ejemplo define dos pares de comillas en cada elemento de modo que se alternan las 
comillas cada vez que un elemento se encuentra dentro de otro elemento que tambien muestra 
comillas: 

blockquote, span { 
quotes: "«" “»" "" 

} 

blockquote:before, span:before { 
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content: open-quote; 

} 

blockquote:after , span:after { 
content: close-quote; 

> 

<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis 
tellus vulputate lobortis. <span>Vivamus fermentum</span>, tortor id ornare ultrices, 
ligula ipsum tincidunt pede, et blandit <span>sem pede suscipit pede.</span> Nulla 
cursus porta sem. Donee mollis nunc in leo.</blockquote> 

Las reglas CSS anteriores indican que el navegador debe utilizar diferentes comillas cuando el 
nivel de anidamiento sea diferente: 


"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus 
vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum 
tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donee 
mollis nunc in leo." 


En el ejemplo anterior, tanto <blockquote> como <abbr> establecen dos pares de comillas. 
Cuando uno de estos dos elementos se encuentre dentro de otro elemento que ya muestra 
comillas, la propiedad quotes indica que se debe utilizar el segundo par de comillas en vez del 
primero. Por lo tanto, si utilizas un navegador que soporta la propiedad quotes, el ejemplo 
anterior se visualiza de la siguiente forma: 

«Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis. " Vivamus 
fermentum", tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit "sem pede suscipit pede." Nulla 
cursus porta sem. Donee mollis nunc in leo.» 

Figura 4.7. Ejemplo de la propiedad quotes 

Los valores de la propiedad quotes se indican mediante cadenas de texto. Una cadena de texto es 
un conjunto de uno o mas caracteres encerrados por las comillas dobles (") o las comillas 
simples ('). Si la cadena contiene comillas dobles, se encierra con las comillas simples y 
viceversa. Si una cadena de texto tiene tanto comillas simples como dobles, las comillas 
problematicas se modifican y se les anade la barra invertida \ por delante: 

/* ComiLLas simpLes encerradas por comiLLas dobles */ 

.selector { quotes: } 

/* Comillas dobles encerradas por comillas simpLes V 
.selector { quotes: "" } 

/* Comillas simpLes y dobles encerradas por comillas dobles */ 

.selector { quotes: "".; } 

/* Comillas simpLes y dobles encerradas por comillas simpLes V 
.selector { quotes: "" "" 'V' 'V'; } 
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Como las comillas se indican mediante cadenas de texto, no estan limitadas a un solo caracter. 
En el siguiente ejemplo se utilizan unas comillas poco habituales formadas por varios caracteres: 
blockquote, span { 

} q 

blockquote:before, span:before { 
content: open-quote; 

} 

blockquote:after, span:after { 
content: close-quote; 

} 

<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis 
tellus vulputate lobortis. <span>Vivamus fermentum</span>, tortor id ornare ultrices, 
ligula ipsum tincidunt pede, et blandit <span>sem pede suscipit pede.</span> Nulla 
cursus porta sem. Donee mollis nunc in leo.</blockquote> 

Las reglas CSS anteriores producen el siguiente resultado en el navegador: 


"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus 
vulputate lobortis. Vivamus fermentum, tortor id ornare ultrices, ligula ipsum 
tincidunt pede, et blandit sem pede suscipit pede. Nulla cursus porta sem. Donee 
mollis nunc in leo." 


En un navegador con soporte de la propiedad quotes, el ejemplo anterior se visualiza de la 
siguiente forma: 

«««Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non sem quis tellus vulputate lobortis. - 
Vivamus fermentum-, tortor id ornare ultrices, ligula ipsum tincidunt pede, et blandit -sem pede suscipit 
pede - Nulla cursus porta sem. Donee mollis nunc in leo.»»» 

Figura 4.8. Ejemplo de la propiedad quotes 

Utilizando el pseudo-selector :lang() es posible incluso definir diferentes tipos de comillas en 
funcion del idioma del contenido: 

I blockquote:lang(en) { quotes: . } /* comillas para ingles */ 

| blockquote:lang(es) { quotes: "«" "»" "" } /* comillas para espafiol */ 

La propiedad quotes define otro valor llamado none que hace que no se muestre ninguna comilla 
cuando se utiliza el valor open-quote y close-quote de la propiedad content. 

Por ultimo, el estandar de CSS 2.1 recomienda utilizar directamente los codigos definidos en el 
estandar ISO 10646 para indicar la comilla que se quiere utilizar. 

De esta forma, las dos siguientes reglas CSS son equivalentes: 

blockquote, abbr { 
quotes: "«" "»" 

} 
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blockquote, abbr { 

quotes: "\00AB" "\00BB" "\0027" "\0027"j 

} 


La siguiente tabla recoge las comillas mas utilizadas y sus codigos correspondientes: 


Caracter tipografico de la comilla 

Como la muestran los navegadores 

Codigo ISO 10646 



0022 



0027 

< 

< 

2039 

> 

> 

203A 

« 

« 

00AB 

» 

» 

00BB 



2018 



2019 

" 


201C 



201D 



201E 


4.5. Propiedad counter-reset 


Definicion 

Inicializa el valor de uno o mas contadores 

Valores 

permitidos 

Uno y solo uno de los siguientes valores: 

■ Uno o mas nombres de contadores seguidos opcionalmente por un numero entero cada 

uno 

■ none 

* inherit 

Valor inicial 

none 

Se aplica a 

Todos los elementos 

Valida en 

all 

Se hereda 

no 

Definicion 

en 

el estandar 

http://www. w3.org/TR/CSS21/generate.html#propdef-counter-reset 


La propiedad counter-reset se emplea para controlar la numeracion automatica de CSS 2.1 que 
se utiliza en las funciones counterQ y countersQ de la propiedad content. 
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El funcionamiento basico de la propiedad counter-reset es sencillo, pero su flexibilidad y la 
combination con otras propiedades y funciones de CSS pueden complicar mucho su 
interpretation. 

En el caso mas sencillo, la propiedad counter-reset indica el nombre de un contador seguido 
opcionalmente por un numero entero que indica el valor al que se inicializa el contador: 
body { 

counter-reset: numero_capitulo 0; 

} 

La regia CSS anterior hace que se inicialice a 0 un contador llamado numero_capitulo cuando el 
navegador encuentre el elemento cbodyx Si el contador no existia, el estandar CSS 2.1 indica que 
se crea cuando se encuentre el primer elemento <body>, es decir, al principio de la pagina. 

La regia CSS anterior se puede emplear para crear el contador que se utiliza posteriormente en 
las propiedades counter-increment y content: 

body { 

counter-reset: numero_capitulo 0; 

} 

hi:before { 

content: "Capitulo " counter(numero_capitulo); 
counter-increment: numero_capitulo 1; 

} 

Cuando se inicializa y se actualiza el valor de un contador en un mismo elemento, primero se 
inicializa su valor y despues se actualiza segun la propiedad counter-increment. 

Si no se indica el numero entero opcional, los navegadores suponen que vale 0, por lo que las 
siguientes reglas CSS son equivalentes a las anteriores: 
body { 

counter-reset: numero_capitulo; 

} 

hi:before { 

content: "Capitulo " counter(numero_capitulo); 
counter-increment: numero_capitulo 1; 

} 

La propiedad counter-reset tambien cumple con el comportamiento en cascada de las 
propiedades CSS, por lo que en el siguiente ejemplo: 

P { 

counter-reset: parrafos; 

} 

P { 

counter-reset: elementos; 

} 

Las reglas CSS anteriores provocan un colision en el valor de la propiedad counter-reset. Segun 
las normas de resolution de colisiones, en este caso gana la ultima regia y los elementos de tipo 
<p> solo inicializan el valor del contador elementos. 
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Ademas de inicializar el valor de los contadores a 0, tambien es posible inicializarlos a cualquier 
otro valor entero positivo o negativo, tal y como muestra el siguiente ejemplo: 
body { 

counter-reset: numero_capitulo -1; 

} 

hi:before { 

content: "Capitulo " counter(numero_capitulo); 
counter-increment: numero_capitulo; 
counter-reset: numero_seccion -1; 

} 

La propiedad counter-reset tambien permite indicar varios contadores para inicializarlos de 
forma simultanea: 
hi { 

counter-reset: numero_seccion numero_tabla numero_imagen; 

} 

La regia CSS anterior inicializa a 0 los contadores numero_seccion, numerojtabla y 
numero_imagen cada vez que se encuentra un elemento <hl> en la pagina. Tambien es posible 
indicar diferentes valores iniciales para cada contador: 
hi { 

counter-reset: numero_seccion 0 numero_tabla -1 numero_imagen -1; 

} 

Ademas, tambien es posible indicar el mismo contador mas de una vez en la propiedad 
counter-reset. En este caso, se realizan todas las inicializaciones en el orden indicado: 

P { 

counter-reset: parrafos parrafos -1 parrafos 3; 

} 

P { 

counter-reset: parrafos parrafos -1 parrafos 3 parrafos; 

} 

La primera regia del ejemplo anterior inicializa el valor del contador parrafos a 3, mientras que 
la segunda regia inicializa el contador parrafos a 0. Como el navegador procesa las 
inicializaciones en el mismo orden indicado, la unica que se tiene en cuenta es la ultima. 

Los contadores tienen en cuenta el anidamiento de los elementos HTML. Si se consideran las 
siguientes reglas CSS: 
div { 

counter-reset: numero_parrafo; 

} 

div p:before { 

content: "Parrafo " counter(numero_parrafo) " 
counter-increment: numero_parrafo; 

} 
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La propiedad counter-reset crea o inicializa el valor del contador numero_parrafo cada vez que 
encuentra un elemento <div>. De esta forma, si la regia CSS anterior se aplica al siguiente codigo 
HTML: 

<div> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

<div> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

<div> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

</div> 

</div> 

</div> 

En el ejemplo anterior, el navegador crea automaticamente tres contadores diferentes pero con 
el mismo nombre (numero_parrafo). Cada vez que se encuentra un elemento <div>, el 
navegador crea o inicializa un contador llamado numero_parrafo, por lo que todos los parrafos 
del ejemplo anterior disponen de la misma numeracion (1, 2 y 3). 

Si se visualiza el ejemplo anterior con un navegador que soporte completamente las propiedades 
counter-reset, counter-increment y content, el resultado es el que muestra la siguiente 
imagen: 
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[div 1] 


Parrafo 1 Lorem ipsunn dolor sit amet 
Parrafo 2 Lorem ipsum dolor sit amet 
Parrafo 3 Lorem ipsum dolor sit amet 


[div 2] 


Parrafo 1 Lorem ipsum dolor sit amet 
Parrafo 2 Lorem ipsum dolor sit amet 
Parrafo 3 Lorem ipsum dolor sit amet 


[div 3] 


Parrafo 1 Lorem ipsum dolor sit amet 
Parrafo 2 Lorem ipsum dolor sit amet 
Parrafo 3 Lorem ipsum dolor sit amet 


Figura 4.9. Ejemplo de las propiedades counter-reset, counter-increment y content 


Los elementos ocultos mediante la propiedad display (display: none) no pueden modificar el 
valor de los contadores, mientras que los elementos ocultos mediante la propiedad visibility 
(visibility: hidden) si que los actualizan: 


p.oculto { 

display: none; 
counter-reset: parrafos; 


} 


/* No se ini.ci.aLi.za porque eL eLemento 

se ha ocuLtado mediante display: none */ 


p.invisible { 
visibility: hidden; 
counter-reset: parrafos; 


} 


/* Se iniciaLiza a 0 porque eL eLemento 

se ha hecho invisible con visibility: hidden */ 
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4.6. Propiedad counter-increment 


Definicion 

Actualiza el valor de uno o mas contadores 

Valores 

permitidos 

Uno y solo uno de los siguientes valores: 

■ Uno o mas nombres de contadores seguidos opcionalmente por un numero entero cada 

uno 

* none 

■ inherit 

Valor inicial 

none 

Se aplica a 

Todos los elementos 

Valida en 

all 

Se hereda 

no 

Definicion 

en 

el estandar 

http://www.w3.Org/TR/CSS21/generate.html#propdef-counter-increment 


La propiedad counter-increment se emplea para controlar la numeracion automatica de CSS 2.1 
que se utiliza en las funciones counter () y counters () de la propiedad content. 

El funcionamiento basico de la propiedad counter-increment es sencillo, pero su flexibilidad y 
la combination con otras propiedades y funciones de CSS pueden complicar mucho su 
interpretation. 

En el caso mas sencillo, la propiedad counter-increment indica el nombre de un contador 
seguido opcionalmente por un numero entero que indica la cantidad en la que se incrementa: 
hi { 

counter-increment: numero_capitulo 1; 

} 

La regia CSS anterior hace que se incremente en una unidad el valor de un contador llamado 
numero_capitulo cada vez que la pagina incluya un elemento <hl>. Si el contador no existia, el 
estandar CSS 2.1 indica que cuando se encuentre el primer elemento <hl>, se crea el contador, se 
inicializa al valor 0 y posteriormente se actualiza su valor segun la propiedad 
counter-increment indicada. 

Este contador basico se puede emplear para anadir una numeracion automatica a los elementos 
<hl> de la pagina: 

hi:before { 

content: "Capitulo " counter(numero_capitulo); 
counter-increment: numero_capitulo 1; 

} 

Cuando se actualiza y se utiliza el valor de un contador en un mismo elemento, primero se 
actualiza su valor y despues se utiliza en la propiedad content. 
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Si no se indica el numero entero opcional, los navegadores suponen que vale 1, por lo que la 
siguiente regia CSS es equivalente a la anterior: 
hi:before { 

content: "Capitulo " counter(numero_capitulo); 
counter-increment: numero_capitulo; 

} 

Ademas de incrementar el valor de los contadores, tambien es posible decrementarlo o no 
modificarlo. El siguiente ejemplo amplia el anterior para no incrementar el valor del contador en 
algunos elementos <hl> especiales: 
hi:before { 

content: "Capitulo " counter(numero_capitulo); 
counter-increment: numero_capitulo; 

} 

hi.especial { 

counter-increment: numero_capitulo 0; 

} 

No obstante, si se quiere inicializar un contador para que vuelva a valer 0 o cualquier otro valor 
numerico, es preciso utilizar la propiedad counter-reset. 

La propiedad counter-increment tambien permite indicar varios contadores para actualizarlos 
de forma simultanea: 

P { 

counter-increment: elementos parrafos especial 2; 

} 

La regia CSS anterior incrementa en una unidad el valor de los contadores elementos y parrafos 
cada vez que se encuentra un elemento <p> en la pagina. Ademas, incrementa en 2 unidades el 
valor de otro contador llamado especial cada vez que encuentra un elemento <p>. 

Tambien es posible indicar el mismo contador mas de una vez en la propiedad 
counter-increment: 

P { 

counter-increment: elementos parrafos especial 2 parrafos elementos 3; 

} 

En el ejemplo anterior, cada vez que se encuentra un elemento <p> en la pagina se incrementa 4 
unidades el valor del contador elementos, 2 unidades el valor del contador parrafos y 2 
unidades el valor del contador especial. 

Los contadores tienen en cuenta el anidamiento de los elementos HTML. Si se consideran las 
siguientes reglas CSS: 
div { 

counter-reset: numero_parrafo; 

} 

div p:before { 

content: "Parrafo " counter(numero_parrafo) " 
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counter-increment: numero_parrafo; 

} 

La propiedad counter-reset crea o inicializa el valor del contador numero_parrafo cada vez que 
encuentra un elemento <div>. De esta forma, si la regia CSS anterior se aplica al siguiente codigo 
HTML: 

<div> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

<div> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

<div> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

<p>Lorem ipsum dolor sit amet</p> 

</div> 

</div> 

</div> 

En el ejemplo anterior, el navegador crea automaticamente tres contadores diferentes pero con 
el mismo nombre (numero_parrafo). Cada vez que se encuentra un elemento <div>, el 
navegador crea o inicializa un contador llamado numero_parrafo, por lo que todos los parrafos 
del ejemplo anterior disponen de la misma numeracion (1, 2 y 3). 

Si se visualiza el ejemplo anterior con un navegador que soporte completamente las propiedades 
counter-increment, counter-reset y content, el resultado es el que muestra la siguiente 
imagen: 
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[div 1] 


Parrafo 1 Lorem ipsunn dolor sit amet 
Parrafo 2 Lorem ipsum dolor sit amet 
Parrafo 3 Lorem ipsum dolor sit amet 


[div 2] 


Parrafo 1 Lorem ipsum dolor sit amet 
Parrafo 2 Lorem ipsum dolor sit amet 
Parrafo 3 Lorem ipsum dolor sit amet 


[div 3] 


Parrafo 1 Lorem ipsum dolor sit amet 
Parrafo 2 Lorem ipsum dolor sit amet 
Parrafo 3 Lorem ipsum dolor sit amet 


Figura 4.10. Ejemplo de las propiedades counter-increment, counter-reset y content 


Los elementos ocultos mediante la propiedad display [display: none) no modifican el valor de 
los contadores, mientras que los elementos ocultos mediante la propiedad visibility 
[visibility: hidden) si que los actualizan: 


p.oculto { 

display: none; 

counter-increment: parrafos; 


} 


/* No se actuaLiza porque el eLemento 

se ha ocultado mediante display: none */ 


p.invisible { 
visibility: hidden; 
counter-increment: parrafos; 


} 


/* Se actuaLiza porque el eLemento 

se ha hecho invisible con visibility: hidden */ 
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4.7. Propiedad content 


Definicion 

Genera contenido de forma dinamica 

Valores 

permitidos 

Existen cuatro opciones diferentes para establecer el valor o valores de esta propiedad: 

1. Uno o mas de los siguientes valores: 

■ cadena de texto ■ URL ■ contador 

■ valor de un atributo ■ open-quote ■ close-quote 

■ no-open-quote ■ no-close-quote 

2. normal 

3. none 

4. inherit 

Valor inicial 

normal 

Se aplica a 

Solamente a los pseudo-elementos :before y :after 

Valida en 

all 

Se hereda 

no 

Definicion en 

el estandar 

http://www.w3.org/TR/CSS21/generate.html#propdef-content 


La propiedad content es una de las propiedades CSS mas poderosas y a la vez mas 
controvertidas. La propiedad content se emplea para generar nuevo contenido de forma 
dinamica e insertarlo en la pagina HTML. Como CSS es un lenguaje de hojas de estilos cuyo unico 
proposito es controlar el aspecto o presentation de los contenidos, algunos disenadores 
defienden que no es correcto generar nuevos contenidos mediante CSS. 

En primer lugar, el estandar CSS 2.1 indica que la propiedad content solo puede utilizarse en los 
pseudo-elementos : before y : after. Como su propio nombre indica, estos pseudo-elementos 
permiten seleccionar (y por tanto modificar) la parte anterior o posterior de un elemento de la 
pagina. 

El siguiente ejemplo muestra como anadir la palabra Capitulo delante del contenido de cada 
ti'tulo de section <hl>: 

hi:before { 

content: "Capitulo 

} 

Los pseudo-elementos : before y : after se pueden utilizar sobre cualquier elemento de la 
pagina. El siguiente ejemplo anade la palabra Nota: delante de cada parrafo cuya clase CSS sea 
nota: 

p.nota:before { 
content: "Nota: 

} 
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Combinando las propiedades content y quotes con los pseudo-elementos : before y : after, se 
pueden anadir de forma dinamica comillas de apertura y de cierre a todos los elementos 
<blockquote> de la pagina: 

blockquote:before { 
content: open-quote; 

} 

blockquote:after { 
content: close-quote; 

} 

blockquote { 

quotes: "«" "»"; 

} 

Los contenidos insertados dinamicamente en un elemento son a todos los efectos parte de ese 
mismo elemento, por lo que heredan el valor de todas sus propiedades CSS. 

Los dos valores mas sencillos de la propiedad content son none y normal. En la practica, estos 
dos valores tienen el mismo efecto ya que hacen que el pseudo-elemento no se genere. 

El siguiente valor que se puede indicar en la propiedad content es una cadena de texto. En el 
estandar CSS 2.1, una cadena de texto es un conjunto de uno o mas caracteres encerrados por las 
comillas dobles (") o las comillas simples ('). Si la cadena contiene comillas dobles, se encierra 
con las comillas simples y viceversa. Si una cadena de texto tiene tanto comillas simples como 
dobles, las comillas problematicas se modifican y se les anade la barra invertida \ por delante: 

p:before { 

content: "Contenido generado \"dinamicamente\" mediante CSS. "; 

} 

#ultimo:after { 

content: " Fin de los 'contenidos' de la pagina."; 

} 

Las cadenas de texto solo permiten incluir texto basico. Si se incluye alguna etiqueta HTML en la 
cadena de texto, el navegador muestra la etiqueta tal y como esta escrita, ya que no las 
interpreta. Para incluir un salto de linea en el contenido generado, se utiliza el caracter especial 
\A 

El siguiente valor aceptado por la propiedad content es una URL, que suele utilizarse para 
indicar la URL de una imagen que se quiere anadir de forma dinamica al contenido. La sintaxis es 
identica al resto de URL que se pueden indicar en otras propiedades CSS: 

span.especial:after { 

content: url("imagenes/imagen.png"); 

} 

Otros valores que se pueden indicar en la propiedad content son open-quote, close-quote, 
no-open-quote y no-close-quote. Los dos primeros indican que se debe mostar una comilla de 
apertura o de cierre respectivamente. Las comillas utilizadas se establecen mediante la 
propiedad quotes: 

I blockquote { quotes: "«" "»" . } 

| blockquote:before { 
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content: open-quote; 

} 

blockquote:after { 
content: close-quote; 

} 

Los valores no-open-quote y no-close-quote se utilizan para no mostrar ninguna comilla en ese 
elemento, pero incrementando el nivel de anidamiento de las comillas. De esta forma se puede 
evitar mostrar una comilla en un determinado elemento mientras se mantiene la jerarquia de 
comillas establecida por la propiedad quotes. 

Uno de los valores mas avanzados de la propiedad content es attr(), que permite obtener el 
valor de un atributo del elemento sobre el que se utiliza la propiedad content. En el siguiente 
ejemplo, se modifican los elementos <abbr> y <acronym> para que muestren entre parentesis el 
valor de sus atributos title: 

abbr:afterj acronym:after { 
content: " (" attr(title) ")" 

} 

El valor de la propiedad content anterior en realidad es la combination de tres valores: 

■ Cadena de texto " (", que es el parentesis de apertura tras el cual se muestra el valor del 
atributo title. 

■ Atributo title del elemento obtenido mediante attr(title) 

■ Cadena de texto ")", que es el parentesis de cierre que se muestra detras del valor del 
atributo title. 

Si el elemento no dispone del atributo solicitado, la funcion attr(nombre_del_atributo) 
devuelve una cadena de texto vacia. Utilizando attr() solamente se puede obtener el valor de 
los atributos del elemento al que se aplica la propiedad content. 

La funcion attr() es muy util por ejemplo para mostrar la direction a la que apuntan los enlaces 
de la pagina: 
a:after { 

content: " (" attr(href) ")"; 

} 

Los liltimos valores que se pueden indicar en la propiedad content son los contadores creados 
con las propiedades counter-increment y counter-reset. Los contadores mas sencillos se 
muestran con la funcion counter(nombre_del_contador). El siguiente ejemplo crea dos 
contadores llamado capitulo y seccion para utilizarlos con los elementos <hl> y <h2>: 
body { 

counter-reset: capitulo; 

} 

hi { 

counter-reset: seccion; 

} 

hi:before { 
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content: "Capitulo " counten(capitulo) "; 
counter-increment: capitulo; 

} 

h2:before { 

content: counter(capitulo) counter(seccion) " "; 

counter-increment: seccion; 

} 

En el ejemplo anterior, se crea e inicializa su valor a 0 un contador llamado capitulo cuando se 
encuentre el elemento <body>, es decir, al comienzo de la pagina. Ademas, se crea e inicializa su 
valor a 0 otro contador llamado seccion cada vez que se encuentra un elemento <hl> en la 
pagina. 

Posteriormente, se anade de forma dinamica a los elementos <hl> y <h2> el contenido generado 
mediante los contadores. Los elementos <hl> utilizan el contador capitulo y lo incrementan en 
una unidad cada vez que lo utilizan. Los elementos <h2> utilizan los dos contadores para generar 
un contenido que muestra su numeration completa. Ademas, los elementos <h2> actualizan el 
valor del contador seccion. 

Cuando un mismo elemento inicializa/actualiza un contador y lo utiliza en la propiedad content, 
en primer lugar se inicializa/actualiza y despues, el valor actualizado es el que se utiliza 
mediante counterQ. 

Ademas de mostrar el valor de un contador basico, la funcion counter () permite indicar el estilo 
con el que se muestra el valor del contador. La lista de estilos permitidos son los mismos que los 
de la propiedad list-style-type. 

El siguiente ejemplo modifica el anterior para mostrar el valor de los contadores en numeros 
romanos: 
body { 

counter-reset: capitulo; 

} 

hi { 

counter-reset: seccion; 

} 

hi:before { 

content: "Capitulo " counter(capitulOj upper-roman) "; 
counter-increment: capitulo; 

} 

h2:before { 

content: counter(capitulo, upper-roman) counter(seccion, upper-roman) " "; 
counter-increment: seccion; 

} 

Los estilos de los contadores tambien se pueden emplear para no mostrar el valor de los 
contadores en algunos elementos: 

P { 

counter-increment: parrafos; 

} 

p:before { 

content: counter(parrafos); 
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} 

#especial prbefore { 

content: counter(parrafos, none); 

} 

Aunque el valor de los contadores siempre es numerico, tambien es pueden emplear estilos 
graficos como square, disc o circle: 
h2 { 

counter-increment: seccion; 

} 

h2:before { 

content: counter(seccionj disc); 

} 

La funcion counter() solamente muestra el valor de un contador. Por su parte, la funcion 
counters () se utiliza para mostrar de forma simultanea el valor de todos los contadores 
asociados con el elemento. Como se explica en la description de las propiedades 
counter-increment y counter-reset, los contadores se pueden anidar y un mismo elemento 
puede tener asociados varios contadores diferentes con el mismo nombre. 

El siguiente ejemplo muestra unas reglas CSS que crean un contador para los elementos de una 
lista <ol>: 
ol { 

counter-reset: elemento; 
list-style-type: none; 

} 

li:before { 

content: counter(elemento) "; 

counter-increment: elemento; 

} 

Si se considera el siguiente codigo HTML: 

<ol> 

<li>Elemento</li> 

<li>Elemento</li> 

<li>Elemento 

<ol> 

<li>Elemento</li> 

<li>Elemento 

<ol> 

<li>Elemento</li> 

<li>Elemento</li> 

<li>Elemento</li> 

</ol> 

</li> 

<li>Elemento</li> 

</ol> 

</li> 

<li>Elemento</li> 

</ol> 
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Si se aplican las reglas CSS al codigo HTML anterior, se crean tres contadores diferentes con el 
mismo nombre (elemento) y el resultado es el que muestra la siguiente imagen: 

1 . Elemento 

2. Elemento 

3. Elemento 

1 . Elemento 

2. Elemento 

1 . Elemento 

2. Elemento 

3 . Elemento 

3 . Elemento 

4. Elemento 

Figura 4.11. Ejemplo de la propiedad content 
Sin embargo, si se utiliza la funcion counters() en las reglas CSS anteriores: 
ol { 

counter-reset: elemento; 
list-style-type: none; 

} 

li:before { 

content: counters(elementOj '. ') ". "; 
counter-increment: elemento; 

} 

Ahora, el aspecto que muestra la lista de elementos es el de la siguiente imagen: 

1 . Elemento 

2. Elemento 

3. Elemento 

3.1. Elemento 

3.2. Elemento 

3. 2. 1. Elemento 
3. 2. 2. Elemento 
3. 2. 3. Elemento 

3.3. Elemento 

4. Elemento 

Figura 4.12. Ejemplo de la propiedad content 
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En el ejemplo anterior, cada vez que se encuentra un elemento <ol> se crea un contador llamado 
elemento. Por este motivo, los elementos <li> anidados se ven afectados por varios contadores 
llamados elemento. La funcion counter() solo muestra el valor del contador que afecta mas 
directamente al elemento, mientras que la funcion counters () muestra todos los contadores 
empezando desde el mas externo hasta llegar al mas interno. 

El segundo argumento de la funcion counters() es una cadena de texto que se emplea para 
separar los valores de los diferentes contadores. CSS 2.1 no permite utilizar diferentes 
separadores para cada nivel jerarquico. 

Por ultimo, la funcion counters () tambien permite indicar el estilo con el que se muestra el 
valor de los contadores. De esta forma, el siguiente ejemplo modifica el anterior para mostrar el 
valor de todos los contadores en numeros romanos: 
ol { 

counter-reset: elemento; 
list-style-type: none; 

} 

li:before { 

content: counters(elementOj , upper-roman) ". "; 
counter-increment: elemento; 

} 
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Capitulo 5. Frameworks 

Los frameworks se utilizan en el ambito de la programacion de aplicaciones desde hace decadas. 
Recientemente han comenzado a utilizarse para crear aplicaciones web y ya han aparecido 
decenas de frameworks para CSS. 

Genericamente, un framework es un conjunto de herramientas, librerias, convenciones y buenas 
practicas que pretenden encapsular las tareas repetitivas en modulos genericos facilmente 
reutilizables. 

De la misma forma, un framework CSS es un conjunto de herramientas, hojas de estilos y buenas 
practicas que permiten al disenador web olvidarse de las tareas repetitivas para centrarse en los 
elementos unicos de cada diseno en los que puede aportar valor. 

^Que aporta a un disenador descubrir en cada diseno que debe neutralizar los estilos por defecto 
que aplican los navegadores? ^Que aporta un disenador que se dedica continuamente a resolver 
los mismos problemas que se producen al crear layouts complejos? ^Por que el disenador se 
dedica a tareas y problemas que han sido resueltos satisfactoriamente hace mucho tiempo? 

Los frameworks CSS mas completos incluyen utilidades para que el disenador no tenga que 
trabajar en ningun aspecto generico del diseno web. Por este motivo, es habitual que los mejores 
frameworks CSS incluyan herramientas para: 

■ Neutralizar los estilos por defecto que aplican los navegadores. Se trata de la habitual hoja 
de estilos resetcss que todos los disenadores profesionales utilizan. 

■ Manejar correctamente el texto, de forma que se todos los contenidos se vean exactamente 
igual en todos los navegadores y que sean adaptables para mejorar su accesibilidad y 
permitir su acceso en cualquier medio y/o dispositivo. 

■ Crear cualquier estructura compleja o layout de forma sencilla, con la seguridad de que 
funciona correctamente en cualquier version de cualquier navegador. 

Actualmente existen decenas de frameworks CSS, tal y como se recoge en la pagina List of CSS 
frameworks (http://en.wikipedia.org/wiki/List_of_CSS_frameworks) de la Wikipedia. En las 
siguientes secciones se explica detalladamente el framework YUI creado por Yahoo! 

5.1. El framework YUI 

El framework o librerfa YUI (http://developer.yahoo.com/yui/) [Yahoo! User Interface ) es un 
conjunto de utilidades y controles escritos en JavaScript que se utilizan para crear aplicaciones 
web dinamicas complejas. Ademas, la librerfa YUI incluye varias utilidades relacionadas con CSS, 
por lo que tambien se considera un framework CSS. 

Yahoo! distribuye gratuitamente la librerfa YUI en forma de software libre y bajo la licencia BSD 
(http://developer.yahoo.com/yui/license.html) , que permite utilizar YUI para proyectos de 
cualquier tipo, incluso comerciales. 
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Lo mejor de YUI es que cuenta con el respaldo de Yahoo!, que utiliza su libreri'a en muchas de sus 
miles de millones de paginas vistas diarias. Ademas, YUI cuenta con una gran documentacion 
que incluye cientos de ejemplos de uso. 

YUI se ejecuta correctamente en todos los navegadores modernos e incluso en algun navegador 
obsoleto. El soporte de los navegadores se puede consultar en la lista de los navegadores 
soportados por YUI (http://developer.yahoo.com/yui/articles/gbs/] , que se actualiza 
periodicamente. A continuation se muestra la lista de navegadores soportados en cada sistema 
operativo: 

■ Windows XP: Firefox 2 y 3, Internet Explorer 6 y 7, Opera 9.5 

■ Windows Vista: Firefox 3, Internet Explorer 7 

■ Mac OS X 10.5: Firefox 2 y 3, Opera 9.5, Safari 3.1 

5.2. Primeros pasos con el framework YUI 

Para empezar a trabajar con YUI, lo primero que debes hacer es descargar la libreri'a completa. 
Desde la pagina principal de YUI (http://developer.yahoo.com/yui/) se puede pulsar 
directamente sobre el boton Download YUI para que nos redirija automaticamente hasta la 
pagina de descarga. La version de YUI que se utiliza actualmente es la 2, aunque la version en 
pruebas de YUI 3 ya se ha publicado. YUI 2 se descarga mediante un archivo comprimido que 
ocupa unos 9 MB. 

Una vez descargado, descomprime el archivo en cualquier directorio del sistema y veras que 
incluye varios directorios. De todos ellos, los mas importantes para el programador y disenador 
son los siguientes: 

■ docs/: incluye mas de 300 paginas de documentacion y ayuda sobre todos los 
componentes de YUI 

■ examples/: incluye casi 300 ejemplos de uso de todos y cada uno de los componentes de 
YUI 

■ build/: incluye todos los archivos JavaScript y CSS que se deben incluir en las paginas que 
utilizan YUI 

5.2.1. Componentes CSS del framework YUI 

La libreri'a YUI incluye los siguientes cuatro componentes de CSS que se pueden utilizar de forma 
separada, conjunta o combinada de cualquier forma: 

■ reset. css: conjunto de estilos que eliminan y neutralizan todas las inconsistencias en el 
estilo por defecto que aplican los navegadores a los elementos HTML. 

■ base, css: conjunto de estilos que se pueden aplicar despues de neutralizar los estilos por 
defecto del navegador y que muestran cada elemento HTML de forma adecuada. 

■ fonts. css: conjunto de estilos que permiten mostrar el texto con un tamano consistente 
en cualquier navegador. 
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■ grids. css: conjunto de estilos que permiten crear cientos de layouts o estructuras de 
paginas comunes. 

Los componentes CSS de YUI funcionan tanto en el modo quirks como en el modo standards de 
los navegadores. No obstante, YUI recomienda activar el modo standards utilizando el siguiente 
DOCTYPE en las paginas: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ 
strict.dtd"> 

5.2.2. Enlazando los archivos del framework YUI 

Todas las paginas que hacen uso de los componentes de la libreria YUI deben enlazar sus 
archivos. La arquitectura de YUI es tan modular que permite enlazar unicamene los archivos que 
necesita cada pagina y no todos los archivos de la libreria, lo que mejora el rendimiento de la 
aplicacion. 

Si solo quieres utilizar uno de los componentes CSS de YUI, solamente debes enlazar una hoja de 
estilos mediante la etiqueta <link>. Si por ejemplo solo se quiere utilizar el componente 
reset.css para inicializar todos los estilos del navegador, los pasos necesarios son los 
siguientes: 

1) Copia el archivo reset.css que se encuentra en el directorio build/reset al directorio en el 
que guardas todas tus hojas de estilos CSS. 

2) Enlaza la hoja de estilos reset. css en tus paginas utilizando la siguiente etiqueta <link>: 

| <link rel="stylesheet" type="text/css" href="css/reset.css"> 

El valor del atributo href debe contener la ruta completa (absoluta o relativa) hasta el archivo 
CSS enlazado. 

Aunque esta forma de enlazar los recursos CSS de YUI es la mas sencilla, tambien es la mas 
ineficiente. El motivo es que los archivos CSS originales incluyen comentarios, espacios en 
bianco, saltos de linea y otros elementos que aumentan innecesariamente el tamano de los 
archivos. 

Por este motivo, solo se recomienda el uso de los archivos CSS normales cuando el disenador se 
encuentra disenando la pagina y puede necesitar consultar el contenido de los archivos CSS de 
YUI. Cuando la pagina se encuentra terminada, la recomendacion es utilizar los archivos CSS 
comprimidos que proporciona YUI. 

Los archivos comprimidos se encuentran en los mismos directories que los archivos CSS 
normales. La unica diferencia es que los archivos comprimidos anaden el prefijo -min en su 
nombre, indicando que se trata de una version minimizada de los archivos CSS normales. 

Siguiendo con el ejemplo anterior, para enlazar la version comprimida de la hoja de estilos 
reset. css se debe utilizar la siguiente etiqueta <link>: 

| <link rel="stylesheet" type="text/css" href="css/reset-min.css"> 
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Si se utilizan varios componentes CSS de YUI, se sigue el mismo razonamiento para enlazar todas 
las hojas de estilos. El siguiente ejemplo muestra el caso en el que se utilizan las hojas de estilos 
reset.css, fonts.css y grids.css: 

<link rel="stylesheet" type="text/css" href="css/reset-min.css"> 

<link rel="stylesheet" type="text/css" href="css/fonts-min.css"> 

<link rel="stylesheet" type="text/css" href="css/grids-min.css"> 

Como es muy habitual enlazar varias hojas de estilos a la vez, YUI proporciona un metodo 
alternative para hacerlo de forma mucho mas eficiente. En concreto, YUI proporciona las hojas 
de estilos reset-fonts.css y reset-fonts-grids.css por ser las combinaciones de hojas de 
estilos mas habituales. De esta forma, el ejemplo anterior se puede rehacer utilizando una sola 
etiqueta <link>: 

| <link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css"> 

La hoja de estilos reset-fonts-grids.css combina las versiones comprimidas de las tres hojas 
de estilos individuales. Ademas de la reduction en el tamano total del archivo, la gran ventaja es 
que solo se realiza una petition al servidor, en vez de las tres peticiones necesarias en el ejemplo 
anterior. 

Por ultimo, existe otra forma aun mas eficiente de enlazar los componentes CSS necesarios. 
Desde hace unos meses, Yahoo! ofrece la posibilidad de enlazar gratuitamente las hojas de 
estilos CSS desde sus propios servidores. En efecto, nuestras paginas pueden descargar los 
archivos de YUI directamente desde los servidores de Yahoo! y de forma completamente 
gratuita. 

A continuacion se muestra la etiqueta <link> necesaria para descargar las mismas hojas de 
estilos del ejemplo anterior directamente desde los servidores de Yahoo!: 

I <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/ 
reset-fonts-grids/reset-fonts-grids.css"> 

Si solo se emplean por ejemplo los componentes reset.css y base.css, las etiquetas necesarias 
se muestran a continuacion: 

clink rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/ 
reset-min.css"> 

clink rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/base/ 
base-min.css"> 

Aunque deducir las direcciones completas de cada componente CSS es trivial, YUI proporciona 
una herramienta grafica llamada YUI: Configuration and Hosting (http://developer.yahoo.com/ 
yui/articles/hosting/) que genera automaticamente las etiquetas clink> de los componentes 
CSS seleccionados. 

Las ventajas de utilizar los propios servidores de Yahoo! para servir los archivos de YUI son 
numerosas: 

■ Yahoo! dispone de miles de servidores repartidos por todo el mundo y la descarga se 
realiza siempre desde el servidor mas cercano al usuario. De hecho, los servidores que 
proporciona Yahoo! son exactamente los mismos que utiliza Yahoo! en sus aplicaciones. 
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■ Yahoo! sirve todos sus archivos comprimidos mediante el servidor web y con la 
information precisa para que el navegador los almacene en su cache local. La compresion 
reduce el tamano de los archivos CSS hasta un 60% y el control de la cache evita que el 
usuario tenga que descargar repetidamente el mismo archivo. 

■ Los servidores de Yahoo! son infinitamente mas potentes y fiables que cualquier servidor 
web propio. Ademas, la velocidad de transmision de los archivos tambien es infinitamente 
mas rapida que la conseguida con cualquier conexion de red propia. 

■ El servicio es completamente gratuito y permite enlazar cualquier version actual o pasada 
de la libreria YUI. 

5.3. Inicializando estilos con el framework YUI 

El primer componente CSS de YUI es reset. css, una hoja de estilos utilizada para neutralizar los 
estilos que aplican por defecto los navegadores a todos los elementos HTML. 

A continuation se muestra el contenido complete de reset .css: 

/* 

Copyright (c) 2008, Yahoo! Inc. ALL rights reserved. 

Code Licensed under the BSD License: 
http://deveLoper.yahoo.net/yui/License.txt 
version: 2.5.2 
V 

html{color:#000;background:#FFF;} 

body,div,dl,dt,dd,ul,ol,li,hi,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquc 
table{border-collapse:collapsejborder-spacing:0;} 
fieldset,img{border:0;} 

address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} 
li{list-style:none;} 
caption,th{text-align:left;} 

hi,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} 

q:before,q:after{content:'';} 

abbr,acronym {border:0;font-variant:normal;} 

/* to preserve Line-height and seLector appearance */ 
sup {vertical-align:text-top;} 
sub {vertical-align:text-bottom;} 

input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;} 

/*to enabLe resizing for IE*/ 

input,textarea,select{*font-size:100%;} 

/*because Legend doesn't inherit in IE */ 
legend{color:#000;} 

A1 contrario que las hojas de estilo de tipo reset de otras librerias y frameworks, el archivo 
reset.css solamente neutraliza los estilos que aplica por defecto el navegador. El cambio mas 
evidente que provoca el reset. css de YUI es que el texto de todos los elementos se muestra con 
el mismo aspecto. No importa si se trata de un parrafo <p>, una etiqueta <strong> o un titulo de 
section <hl>, ya que el reset.css anterior hace que todos se vean igual. Por tanto, las paginas a 
las que solo se aplica la hoja de estilos reset.css no estan preparadas para mostrarlas a los 
usuarios. 
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Las hojas de estilo reset.css de otros frameworks neutralizan los estilos por defecto y depues 
aplican unos estilos adecuados para poder mostrar correctamente las paginas: cada titulo de 
section tiene un tamano mayor que el siguiente, los elementos <strong> se ven en negrita, los 
margenes son adecuados para separar los contenidos de texto, etc. 

YUI dispone de otro componente CSS llamado base.css para aplicar unos estilos adecuados a las 
paginas que han sido neutralizadas mediante reset.css. Por lo tanto, una pagina a la que se le 
aplican las hojas de estilos reset. css y base. css ya estan listas para mostrarse a los usuarios, a 
falta de la personalization del aspecto que realice posteriormente el disenador. 

El contenido de la hoja de estilos base. css de YUI se muestra a continuation: 

/* 

Copyright (c) 2008, Yahoo! Inc. ALL rights reserved. 

Code Licensed under the BSD License: 
http://deveLoper.yahoo.net/yui/License.txt 
version: 2.5.2 
V 

/* base.css, part of YUI's CSS Foundation */ 
hi { 

font-size:138.5%; 

} 

h2 { 

font-size:123.1%; 

} 

h3 { 

font-size:108%; 

} 

hljh2jh3 { 

margin:lem 0; 

} 

hl,h2 J h3 J h4 J h5,h6,strong { 
font-weight:bold; 

} 

abbr,acronym { 

border-bottom:lpx dotted #000; 
cursor:help; 

} 

em { 

font-style:italic; 

} 

blockquotejUljOljdl { 
margin:lem; 

} 

oljUljdl { 

margin-left:2em; 

} 

ol li { 

list-style: decimal outside; 

} 

ul li { 

list-style: disc outside; 

} 

dl dd { 
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margin-left:lem; 

} 

thjtd { 

border:lpx solid #000; 
padding:.5em; 

} 

th { 

font-weight:bold; 
text-align:center; 

} 

caption { 

margin-bottom:.5em; 
text-align:center; 

> 

Pjfieldsetjtablejpre { 
margin-bottom:lem; 

} 

input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;} 

Despues de aplicar reset.css todos los contenidos de texto de la pagina se muestran con un 
tamano de letra de 16px. La hoja de estilos base.css hace que los ti'tulos de section <hl>, <h2> y 
<h3> se muestren mas grandes que el resto de texto y tambien hace que se muestren en negrita. 
Otros de los estilos comunes que establece base.css son los marcadores que muestran los 
elementos de las listas, los hordes de las celdas de tabla y los margenes verticales y laterales de 
los elementos. 

La mayoria de paginas creadas con los componentes CSS de YUI utilizan reset.css y base.css, 
por lo que es comun que incluyan las siguientes etiquetas <link>: 

I <link rel="stylesheet" type="text/css" href="css/reset-min.css"> 

| <link rel="stylesheet" type="text/css" href="css/base-min.css"> 

Recuerda que tambien puedes enlazar estas mismas hojas de estilos directamente desde los 
servidores de Yahoo!: 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/ 
reset-min.css"> 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/base/ 
base-min.css"> 

5.4. Texto con el framework YUI 

El manejo del texto es una de las grandes ventajas aportadas por el uso del framework. Definir 
las propiedades del texto de la forma que indica YUI asegura que tus paginas se ven exactamente 
igual en cualquier version de cualquier navegador. Ademas, garantiza que las propiedades del 
texto de tus paginas seran consistentes y que los contenidos de texto se adaptan perfectamente a 
cualquier medio y/o dispositivo. 

En primer lugar, el tercer componente CSS de YUI es fonts.css, una hoja de estilos tan sencilla 
como se muestra a continuation: 

| Copyright (c) 2008, Yahoo! Inc. ALL rights reserved. 
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Code Licensed under the BSD License: 
http://deveLoper.yahoo.net/yui/License.txt 
version: 2.5.2 
V 

body {font:13px/l.231 arial,helvetlea,clean,sans-serif;*font-size:small;*font:x-small;} 
table {font-size:inherit;font:100%;} 

pre,code,kbd,samp,tt {font-family:monospace;*font-size:108%;line-height:100%;} 

Despues de aplicar reset. css, base.css y fonts. css, las paginas muestran el texto normal con 
un tamano de letra de I3px y un interlineado de I6px. Los ti'tulos <hl> se muestran con un 
tamano de 18px, los ti'tulos <h2> con un tamano de 16px y los ti'tulos <h3> con un tamano de 14px. 
Ademas, todos los elementos de texto se muestran con el tipo de letra Arial o similar, salvo los 
elementos <code> y <pre> que se muestran con una fuente de ancho fijo. 

YUI recomienda establecer todos los tamanos de letra utilizando el porcentaje como unidad de 
medida, porque asegura que el texto se muestra de forma mas consistente que al utilizar la 
unidad em. Como el tamano de letra base establecido por fonts.css es 13px, esta medida es la 
que corresponde al valor 100%. Utilizando una sencilla operation se puede obtener el porcentaje 
correspondiente a cualquier tamano en pixeles. La siguiente tabla muestra algunos de los 
valores mas comunes: 


Para obtener este tamano en pixeles... 

...utiliza el siguiente valor de porcentaje 

10px 

77% 

llpx 

85% 

12px 

93% 

13px 

100% 

14px 

108% 

15px 

116% 

16px 

123.1% 

17px 

131% 

18px 

138.5% 

19px 

146.5% 

20px 

153.9% 

21px 

161.6% 

22px 

167% 

23px 

174% 

24px 

182% 

25px 

189% 

26px 

197% 


Por lo tanto, si se quiere modificar por ejemplo el tamano de letra de los parrafos y de los ti'tulos 
de section <hl> y <h2>, debes utilizar las siguientes reglas en tu hoja de estilos propia: 
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P { 

font-size: 123.1%; /* equivaLe a 16px */ 

} 

hi { 

font-size: 182%; /* equivaLe a 24px */ 

} 

h2 { 

font-size: 167%; /* equivaLe a 22px */ 

} 

h3 { 

font-size: 153.9%; /* equivaLe a 20px */ 

} 

De la misma forma, tambien es posible modificar el tipo de letra de cualquier elemento de la 
pagina. Las siguientes reglas hacen que los parrafos se muestren con un tipo de letra Georgia o 
similar y los titulos de section con un tipo de letra Verdana o similar: 

P { 

font-family: Georgia, "Times New Roman", Times, serif; 

} 

hi, h2, h3, h4, h5, h6 { 

font-family: Verdana, Arial, Helvetica, sans-serif; 

} 

Para hacer uso de los estilos proporcionados por el componente fonts.css es necesario que las 
paginas enlacen esa hoja de estilos: 

| <link rel="stylesheet" type="text/css" href="css/fonts-min.css"> 

Recuerda que tambien puedes enlazar esta misma hoja de estilos directamente desde los 
servidores de Yahoo!: 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/fonts/ 
fonts-min.css"> 

Por ultimo, como es muy comun utilizar todos los componentes CSS de forma simultanea, YUI 
incluye una hoja de estilos que combina todas las hojas de estilos individuales. Ademas de 
reducir el tamano total de los archivos, disponer de una sola hoja de estilos reduce el numero de 
peticiones realizadas al servidor. Para utilizar la hoja de estilos completa solo es necesario 
utilizar la siguiente etiqueta <link>: 

| <link rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css"> 

La hoja de estilos completa tambien se puede enlazar directamente desde los servidores de 
Yahoo!: 

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/ 
reset-fonts-grids/reset-fonts-grids.css"> 

5.5. Layouts con el framework YUI 

El ultimo componente CSS de YUI es grids.css, una hoja de estilos sencilla que permite crear 
mas de 1.000 layouts diferentes. Disenar layouts con YUI es muy sencillo y tiene la ventaja de que 
todos los disenos se ven exactamente igual en cualquier version de cualquier navegador. 
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5.5.1. Primeros pasos 

YUI recomienda utilizar un DOCTYPE que asegure que el navegador muestra sus contenidos en 
el modo standards en vez del modo quirks. De hecho, Yahoo! utiliza el siguiente DOCTYPE en 
todos los sitios disenados con YUI: 

I <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

| "http://www.w3.org/TR/html4/strict.dtd"> 

No obstante, ten en cuenta que el DOCTYPE anterior corresponde a una pagina HTML y por 
tanto, no es valido si utilizas XHTML en tus paginas. Si se quiere emplear YUI en paginas XHTML 
puedes utilizar uno de los dos siguientes DOCTYPE: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transltlonal.dtd"> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtmll/DTD/xhtmll- strict.dtd"> 

Antes de crear layouts con el componente grids. css, es necesario enlazar su hoja de estilos: 

| <link rel="stylesheet" type="text/css" href="css/grids-min.css"> 

La hoja de estilos tambien se puede enlazar directamente desde los servidores de Yahoo!: 

I <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/grids/ 
grids-min.css"> 

El componente grids.css depende de los valores iniciales establecidos por el componente 
fonts. css, por lo que tambien es necesario enlazar este ultimo. Como las paginas disenadas con 
YUI tambien utilizan el componente reset.css, es habitual utilizar la hoja de estilos global que 
incluye estos tres componentes individuates: 

| clink rel="stylesheet" type="text/css" href="css/reset-fonts-grids.css"> 

Para obtener el maximo rendimiento tambien es posible enlazar esta hoja de estilos completa 
directamente desde los servidores de Yahoo!: 

I clink rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/ 

| reset-fonts-grids/reset-fonts-grids.css"> 

5.5.2. Pagina, plantilla y rejilla 

YUI recomienda utilizar la siguiente estructura general en las paginas: 

c!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ 

strict.dtd"> 

chtml> 

chead> 

ctitle>Pagina disenada con YUIc/title> 

clink rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> 
c/head> 
cbody> 

cdiv id="doc"> 
cdiv id="hd"> 

</-- contenidos de La cabecera --> 
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</div> 

<div id="bd"> 

<!-- contenidos principaies de La pagina --> 
</div> 

<div id="ft"> 

<!-- contenidos deL pie de pagina --> 

</div> 

</div> 

</body> 

</html> 

La pagina se divide en tres partes: 


* Cabecera (#hd): zona en la que se incluyen normalmente los elementos invariantes de la 
pagina tales como el logotipo, el buscador y el menu principal de navegacion. 

■ Cuerpo (#bd): zona en la que se incluyen todos los contenidos especificos de la pagina. Se 
trata de la zona mas importante y la que suele tener una estructura mas compleja. 

■ Pie (#ft): zona en la que se incluyen otros elementos invariantes de la pagina que son de 
menor importancia, tales como el aviso de copyright, enlaces a las secciones de contacto, 
privacidad, terminos y condiciones y otros elementos que dependen del tipo de pagina. 

La division anterior de la pagina no es obligatoria y YUI permite crear layouts sin utilizar esa 
estructura. No obstante, se trata de una estructura muy recomendable porque es valida para la 
inmensa mayoria de sitios web y ayuda a estructurar los contenidos de la pagina de forma logica. 

Los nombres utilizados como identificador (#hd de header o cabecera, #bd de body o cuerpo y 
#ft de footer o pie) tampoco son obligatorios, aunque su uso esta muy extendido entre los 
disenadores profesionales y al ser tan cortos permiten hacer reglas CSS mas concisas. 


Antes de disenar layouts con YUI es necesario comprender las partes en las que YUI divide la 
estructura de una pagina: 


Pagina completa H Pagina I Plantilla I Rejilla 



Figura 5.1. Pagina, plantilla y rejilla en los layouts de YUI 


YUI divide la estructura de una pagina en tres partes: 
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■ Pagina: establece la anchura total de la pagina y su comportamiento (anchura fija o 
variable). Utiliza los selectores #doc, #doc2, #doc3 y #doc4. 

■ Plantilla: establece la division en columnas del cuerpo de la pagina. Utiliza los selectores 
.yui-b, .yui-tl, .yui-t2, .yui-t3, .yui-t4, .yui-t5y .yui-t6. 

■ Rejilia: establece las divisiones internas de cada columna. Utiliza los selectores .yui-u, 
.yui-g, .yui-gb, .yui-gc, .yui-gd, .yui-ge, .yui-gf. 

5.5.3. Pagina 

La primera parte de la estructura de la pagina es la propia pagina, concretamente su anchura y 
su comportamiento. YUI incluye por defecto cuatro tipos de paginas que corresponden a los 
disenos mas utilizados hoy en dia: 


Selector 

Caracterfsticas de la pagina 

Recomendada para 

#doc 

Centrada, anchura 750px 

Resolucion de 800x600 o superior 

#doc2 

Centrada, anchura 950px 

Resolucion de 1024x768 o superior 

#doc3 

Anchura 100% 

Cualquier resolucion 

#doc4 

Centrada, anchura 974px 

Resolucion de 1024x768 o superior 


Nota 

El diseno #doc3 en realidad no ocupa el 100% de la pagina, ya que incluye l0px de margen izquierdo y 
otros l0px de margen derecho. De esta forma se evita que los contenidos de la pagina puedan llegar a 
invadir el espacio ocupado por el propio navegador. No obstante, si quieres eliminar estos margenes 
laterales tan solo debes anadir la siguiente regia CSS en la hoja de estilos propia de la pagina: #doc3 { 
margin: auto; } 


Para utilizar una u otra pagina, solo es necesario cambiar el atributo id del elemento <div> que 
encierra todos los contenidos. El ejemplo mostrado anteriormente utiliza el selector #doc, 
correspondiente a una pagina de anchura fija de 750px: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ 
strict.dtd"> 

<html> 

<head> 

<title>Pagina disenada con YUI</title> 

<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> 

</head> 

<body> 

<div id="doc"> <!-- 750pXj centrada --> 

</div> 

</body> 

</html> 

Si se quiere modificar la pagina anterior para que su anchura sea del 100%, solo es necesario 
modificar ligeramente el selector del elemento <div> que encierra a todos los contenidos: 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.ong/TR/html4/ 
strict.dtd"> 

<html> 

<head> 

<title>Pagina disenada con YUI</title> 

clink rel="stylesheet" type="text/css" hnef="reset-fonts-grids.css"> 

</head> 

<body> 

<div id="doc3"> </-- 100% --> 

</div> 

</body> 

</html> 

Aunque los cuatro tipos de pagina inclui'dos en YUI corresponden a los disenos mas utilizados, 
tambien es posible crear una anchura de pagina completamente personalizada. Como las 
anchuras de pagina en YUI se establecen mediante la unidad de medida em, el proceso requiere 
realizar alguna operation matematica. 

Para obtener la anchura en em, divide la anchura deseada en pixeles por 13. Para el navegador 
Internet Explorer es preciso dividir la anchura en pixeles por 13.3333. Si por ejemplo se quiere 
establecer una anchura de pagina de I300px, el calculo que se debe realizar es el siguiente: 

■ Navegador Internet Explorer: 1300 / 13.3333 = 97.50. Por tanto, la anchura de pagina es 
97.50em. 

■ Resto de navegadores: 1300 / 13 = 100. Por tanto, la anchura de pagina es 100em. 

Una vez calculada la anchura en em, se utiliza la siguiente regia CSS para crear el tamano de 
pagina propio: 

#doc-propio { 

text-align:left; /* obLigatorio V 
margin:auto; /* para centrar La pagina */ 

width: 100em; /* resto de navegadores */ 

*width: 97.50em; /* navegador Internet Explorer */ 

min-width: 1300px; /* opcionalj pero recomendada */ 

} 

La propiedad text-align: left es obligatoria para mostrar el texto alineado a la izquierda, ya 
que en la hoja de estilos grids. css el elemento <body> establece la propiedad text-align: 
center; . La propiedad margin : auto solo es necesaria si se quiere centrar la pagina respecto de 
la ventana del navegador. 

La anchura de todos los navegadores menos Internet Explorer se establece directamente 
mediante la propiedad width. En el caso de Internet Explorer, su anchura se establece mediante 
un hack muy conocido que hace que solo Internet Explorer interprete la propiedad *width. Esta 
propiedad *width siempre se debe incluir despues de la propiedad width. 

Por ultimo, la propiedad min-width es opcional, pero se recomienda establecerla con el mismo 
valor de la anchura en pixeles. Su funcion es evitar que la estructura de la pagina se rompa 
cuando la ventana del navegador reduce su tamano. 
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5.5.4. Plantilla 

El siguiente nivel en el que divide YUI la estructura de una pagina es la plantilla, que esta 
formada por las columnas de contenidos de la pagina. Normalmente, las paginas disponen de 
una zona central de contenidos y otra zona lateral con otros contenidos secundarios. 

YUI permite crear estructuras de paginas con dos columnas de diferentes anchuras y en 
diferentes posiciones (izquierda o derecha). En primer lugar se definen las columnas de la 
pagina mediante lo que YUI llama bloques. Cada bloque se crea mediante un elemento <div> con 
la clase yui-b. En el siguiente ejemplo se supone que la pagina esta formada por dos columnas, 
por lo que se crean dos bloques dentro del cuerpo de la pagina: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ 
strict.dtd"> 

<html> 

<head> 

ctitle>Pagina disenada con YUI</title> 

clink rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> 

</head> 

<body> 

<div id="doc"> 

<div id="hd"></-- cabecera --></div> 

<div id="bd"> 

<!-- cuerpo --> 

<div class="yui-b">...</div> 

<div class="yui-b">...</div> 

</div> 

<div id="ft"></-- pie --></div> 

</div> 

</body> 

</html> 

Indicar que la pagina tiene dos bloques no es suficiente, ya que tambien es necesario indicar cual 
de los dos bloques es el principal. Para ello, se encierra el bloque principal con otro elemento 
<div> cuyo id es yui-main: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ 
strict.dtd"> 

<html> 

<head> 

<title>Pagina disenada con YUI</title> 

clink rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> 
c/head> 
cbody> 

cdiv id="doc"> 

cdiv id="hd">c/-- cabecera -->c/div> 
cdiv id="bd"> 

<!-- cuerpo --> 
cdiv id="yui-main"> 
cdiv class="yui-b"> 

<!-- bloque principal --> 
c/div> 
c/div> 

cdiv class="yui-b"> 


www.librosweb.es 


124 



CSS avanzado 


Capftulo5. Frameworks 


<!-- bLoque secundario --> 
</div> 

</div> 

<div id="ft"></-- pie --></div> 
</div> 

</body> 

</html> 


Nota 

La forma en la que esta disenado YUI permite que el orden en el que se definen sus bloques en el codigo 
HTML sea independiente a su visualizacion. Algunos disenadores prefieren colocar el lateral secundario lo 
antes posible dentro del codigo HTML, ya que suele incluir el menu de navegacion y por razones de 
accesibilidad y de SEO es recomendable que aparezca lo antes posible. Con YUI es posible incluir el bloque 
secundario en primer lugar en el codigo HTML con la seguridad de que se visualizara correctamente en la 
posicion establecida. 


Despues de crear los bloques de la pagina y despues de indicar cual es el bloque principal, el 
siguiente paso consiste en utilizar la plantilla adecuada para establecer las anchuras de cada 
bloque y su posicion. YUI incluye por defecto seis tipos de plantillas, que corresponden a los 
disenos mas comunes y estan preparados para mostrar los formatos publicitarios mas 
utilizados: 


Selector 

Caracteristicas de los bloques 

.yui-tl 

Lateral de 160px a la izquierda 

.yui-t2 

Lateral de 180px a la izquierda 

.yui-t3 

Lateral de 300px a la izquierda 

.yui-t4 

Lateral de 180px a la derecha 

.yui-t5 

Lateral de 240px a la derecha 

.yui-t6 

Lateral de 300px a la derecha 


Nota 

Existe una septima plantilla especial que utiliza el selector .yui-t7 y que se puede emplear en las paginas 
que no estan divididas en columnas o bloques. 


Si la pagina ya ha definido sus bloques, utilizar una plantilla u otra es tan sencillo como 
modificar el valor de la clase del elemento <div> que encierra a todos los contenidos: 

<!D0CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ 
strict.dtd"> 

<html> 

<head> 

<title>Pagina disenada con YUI</title> 

<link rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> 

</head> 

<body> 

<div id="doc" class="yui-t"> <!-- pLantiLLa con eL Lateral izquierdo de 160px --> 

<div id="hd"></-- cabecera --></div> 

<div id="bd"> 
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</-- cuerpo --> 

<div id="yui-main"> 

<div class="yui-b"> 

<!-- bLoque pri.nci.paL --> 

</div> 

</div> 

<div class="yui-b"> 

<!-- bLoque secundario --> 

</div> 

</div> 

<div id="ft"></-- pie --></div> 

</div> 

</body> 

</html> 

A continuation se modifica la pagina anterior para utilizar la plantilla que muestra el lateral a la 
derecha y con una anchura de 300px: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ 
strict.dtd"> 

<html> 

<head> 

<title>Pagina disenada con YUI</title> 

clink rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> 

</head> 

<body> 

<div id="doc" class="yui-t6"> <!-- pLantiLLa con eL LateraL derecho de 300px --> 

<div id="hd"></-- cabecera --></div> 

<div id="bd"> 

<!-- cuerpo --> 

<div id="yui-main"> 

<div class="yui-b"> 

<!-- bLoque principaL --> 

</div> 

</div> 

<div class="yui-b"> 

<!-- bLoque secundario --> 

</div> 

</div> 

<div id="ft"></-- pie --></div> 

</div> 

</body> 

</html> 

Las plantillas ofrecidas por YUI son las mas utilizadas en el diseno web, pero en muchas 
ocasiones las paginas presentan otras estructuras mas complejas. Cuando la estructura esta 
dividida en mas columnas, no se utilizan las plantillas, sino que se define directamente una 
rejilla. 

5.5.5. Rejilla 

El tercer elemento que forma la estructura de las paginas en YUI es la rejilla, que permite 
realizar disenos mucho mas complejos que los que se realizan uncamente con las plantillas. La 
estructura en rejilla se puede utilizar junto con las plantillas o de forma independiente. 
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Las rejillas permiten crear divisiones muy complejas y se definen mediante dos elementos: 

1. El contenedor de la rejilla establece el tipo de division. 

2. Las unidades son los elementos individuales en los que esta dividida la rejilla. 

La rejilla mas utilizada y mas sencilla es . yui. g, que divide un elemento en dos partes iguales. El 
codigo HTML necesario es el siguiente: 

<div class="yui-g"> 

<div class="yui-u"x/div> 

<div class="yui-u"x/div> 

</div> 

El elemento <div class="yui-g"> crea una nueva division o rejilla. Como se trata de una 
division en dos partes iguales, en su interior se deben definir dos unidades mediante <div 
class="yui-u"></div>. Ademas, YUI obliga a indicar explicitamente cual de las dos unidades es 
la primera mediante la clase first. De esta forma, el codigo correcto del ejemplo anterior se 
muestra a continuation: 

<div class="yui-g"> 

<div class="yui-u first"x/div> 

<div class="yui-u"x/div> 

</div> 

La siguiente tabla muestra las seis rejillas incluidas por defecto en YUI y sus caracteristicas: 


Selector 

Tipo de division 

•yui.g 

2 unidades a partes iguales (1/2,1/2) 

.yui.gb 

3 unidades a partes iguales (1/3,1/3,1/3) 

•yui.gc 

2 unidades (2/3,1/3) 

•yui.gd 

2 unidades (1/3, 2/3) 

•yui.ge 

2 unidades (3/4,1/4) 

•yui.gf 

2 unidades (1/4, 3/4) 


Utilizando varias de las rejillas predefinidas es posible crear estructuras de pagina muy 
complejas. El siguiente ejemplo muestra el codigo de una pagina cuyo cuerpo esta dividido en 
dos columnas en su parte superior y en tres columnas en su parte inferior: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ 
strict.dtd"> 

<html> 

<head> 

<title>Pagina disenada con YUI</title> 

clink rel="stylesheet" type="text/css" href="reset-fonts-grids.css"> 

</head> 

<body> 

<div id="doc" class="yui-t7"> 

<div id="hd"></-- cabecera --x/div> 

<div id="bd"> 

<!-- cuerpo --> 

<div id="yui-main"> 
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<div class="yui-b"></-- bLoque principal. --> 

<!-- rejiLLa 1/2, 1/2 --> 

<div class="yui-g"> 

<div class="yui-u first"x/div> 

<div class="yui-u"x/div> 

</div> 

<!-- rejiLLa 1/3, 1/3, 1/3 --> 

<div class="yui-gb"> 

<div class="yui-u first"x/div> 

<div class="yui-u"x/div> 

<div class="yui-u"x/div> 

</div> 

</div> 

</div> 

<div class="yui-b"></-- bLoque secundario --> 

</div> 

</div> 

<div id="ft"></-- pie --x/div> 

</div> 

</body> 

</html> 

Combinando las rejillas basicas se pueden obtener otro tipo de rejillas muy utilizadas. La rejilia 
1/4,1/4,1/4,1/4 se puede obtener combinando dos rejillas 1/2,1/2: 

<div id="bd"> 

<!-- cuerpo --> 

<div id="yui-main"> 

<div class="yui-b"x/-- bLoque principaL --> 

<!-- rejiLLa 1/2 , 1/2 --> 

<div class="yul-g"> 

<dlv class="yui-u first"> 

<!-- rejiLLa 1/2, 1/2 --> 

<div class="yui-g"> 

<div class="yui-u first"x/div> 

<div class="yul-u"x/div> 

</div> 

</div> 

<div class="yui-u"> 

</-- rejiLLa 1/2, 1/2 --> 

<div class="yui-g"> 

<div class="yul-u first"x/div> 

<div class="yui-u"x/div> 

</div> 

</div> 

</div> 

</dlv> 
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</div> 

<div class="yui-b"></-- bLoque secundario --> 

</div> 

</div> 

</div> 

Crear estructuras complejas con YUI es realmente sencillo aunque requiere de un peri'odo de 
aprendizaje. Por ese motivo, para los disenadores que estan empezando puede ser de utilidad la 
herramienta YUI: CSS Grid Builder (http://developer.yahoo.com/yui/grids/builder/] que 
permite configurar la estructura de la pagina de forma grafica. 

5.6. Otros frameworks 

YUI (http://developer.yahoo.com/yui/) no es el unico framework CSS disponible, pero si es el 
mas completo. El motivo es que YUI ni siquiera es un framework CSS, sino que es una completa 
libreria de componentes listos para crear aplicaciones web dinamicas. YUI incluye decenas de 
utilidades de todo tipo para facilitar la programacion con Javascript, incluye componentes 
predisenados listos para utilizar, herramientas para comprimir el codigo JavaScript y el codigo 
CSS, componentes para facilitar el diseno web con CSS y otros muchos componentes de todo 
tipo. 

Ademas de YUI, existen muchos otros frameworks que facilitan el diseno de paginas web con CSS. 
Aunque no son tan completos como YUI, cuentan con la ventaja de que solo son frameworks CSS, 
por lo que estan mucho mas especializados. 

A continuation se indican los tres frameworks mas populares al margen de YUI: 

■ 960 Grid System (http://960.gs/): su nombre proviene de 960px, que es la anchura para la 
que optimiza el diseno de los layouts. Este framework divide los 960px de anchura de la 
pagina en 12 o 16 columnas de 60px y 40px de anchura respectivamente y les anade un 
margen izquierdo y derecho de 20px a cada columna. El archivo comprimido del 
framework tambien incluye una plantilla de papel en formato PDF y plantillas para los 
programas Fireworks, OmniGraffle, Photoshop y Visio. 

■ YAML (http://www.yaml.de/): su nombre proviene de "Yet Another Multicolumn Layout" 
y es uno de los frameworks mas completos. Soporta todas las versiones de todos los 
navegadores, incluyendo navegadores tan obsoletos como Internet Explorer 5. La 
documentation de YAML esta formada por un libro en formato PDF de mas de 110 
paginas. Al igual que YUI, el framework YAML tambien dispone de una herramienta 
llamada YAML Builder (http://builder.yaml.de/) que permite configurar graficamente la 
estructura de la pagina. 

■ Blueprint (http://blueprintcss.org/) : framework muy similar en concepto a 960 Grid 
System, ya que por defecto la pagina tiene una anchura de 950px dividida en 24 columnas 
de 30px de ancho y I0px de margenes laterales. 
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6.1. Imageries embebidas 

Segun los estudios realizados por Yahoo! el tiempo de carga de una pagina media depende en un 
80% de la parte del cliente y en un 20% de la parte del servidor. Los navegadores de los usuarios 
dedican la mayor parte del tiempo a descargar imagenes, archivos JavaScript, hojas de estilos 
CSS y otros recursos externos. 

Por este motivo, las mejoras en la parte del cliente generan muchos mas beneficios que las 
mejoras en la parte del servidor. De todos los elementos de la parte del cliente, las imagenes son 
normalmente las que mas penalizan el rendimiento. Ademas del peso de cada imagen, el 
rendimiento se resiente porque cada imagen requiere realizar una petition al servidor. Como los 
navegadores tienen un limite de conexiones simultaneas con el servidor (entre 2 y 8), la 
descarga de una pagina con muchas imagenes se bloquea continuamente. 

Como ya se explico en las secciones anteriores, la solution para mejorar el rendimiento de las 
imagenes consiste en combinarlas en una imagen grande llamada sprite CSS y utilizar la 
propiedad background-image en cada elemento HTML. 

Ademas de los sprites CSS existe otra tecnica que permite embeber o incluir las imagenes en la 
propia pagina HTML u hoja de estilos CSS. La tecnica se suele denominar "imageries embebidas" o 
"imageries en linea". 

Normalmente, en las hojas de estilos y paginas HTML solo se indica la URL de la imagen que 
debe descargar el navegador. En la tecnica de las imagenes embebedidas no se indica la URL, 
sino que se incluyen directamente los bytes de la imagen, para que el navegador pueda 
mostrarla de forma inmediata. 

Los datos de la imagen se incluyen mediante un esquema especial llamado data:, de la misma 
forma que las URL se indican mediante el esquema http:, las direcciones de correo electronico 
mediante el esquema mailto:, etc. El esquema data: se define en el estandar RFC 2397 
(http://www.ietf.org/rfc/rfc2397.txt) y su sintaxis es la siguiente: 

| data:[<mediatype>][;base64],<data> 

El atributo <mediatype> corresponde al tipo de contenido de los bytes que se incluyen. Los tipos 
de contenido estan estandarizados y los que utilizan habitualmente las imagenes son: image/ 
gif, image/jpeg y image/png. Si no se indica el tipo de forma explicita, el navegador supone que 
es text/plain, es decir, texto normal y corriente. 

El valor base64 es opcional e indica que los datos de la imagen se han codificado segun el 
formato base64. Si no se indica este valor, el navegador supone que los bytes de la imagen no 
estan codificados. 

A continuation se muestra el ejemplo de una imagen HTML (<img>) que no se indica mediante 
una URL sino que se incluyen sus bytes directamente en la pagina: 
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<!-- Imogen externa que eL navegador debe descargar desde eL servidor --> 

<img alt="Icono de un libro" width="16" height="16" src="/imagenes/icono_libro.png" /> 

<!-- Imogen embebida que eL navegador puede mostrar directamente porque ya dispone de 
sus bytes --> 

<img alt="Icono de un libro" width="16" height="16" src="data:image/pngjbase64,iV 
BORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAAB10RVh0U29mdHd 
hcmUAQWRvYmUgSWlhZ2VSZWFkeXHJZTwAAAHjSURBVDjLdZ0/alVBEMZ/5+TemxAbFUUskqAoS03Np4KC 
4AsoPoGFIHY+gA+jiDXaKIiChbETtBYLUbSMRf6Aydndmfks9kRjvHdhGVh2fvN9uzON3K7fe7Ai6algA 
3FZCAmQqEF/dnihpKlv7x7dPw0woF64Izg3X15sln9uIe01QYUFCtjc+sVuEqHBKfpVAXBlvLzQXFtdYP 
HkGFUCoahVolY/fnie+bkBV27c5R8A0pHxyhKvPn5hY2MHRQAQeyokFG3ze4cuZfav3gLNYDTg7Pklzpw 
4ijtIQYRwFx6BhdjtCk+erU0CCPfg+/o2o3ZI13WUlLGo58YMg+GIY4dmCWkCAAgPzAspJW5ePFPlV3VI 
4uHbz5S5IQfy/yooFlngxzFser30iFcNcuAVGw3A0Ilt91IkAsyCXQg5QO0szFIEIrogkiguwN2acCo]hjn 
ZGKYx4Ujz5W0A2YDlBMU+BBSYVUvNpxkXuIuWgbs0xTHrG3UHIFWIhsgXtQQpTizNBS5jXZQkhkcywZqQ 
QlAjdRwiml7wU5xWLaLlAvZa8WIjALzIRZ7YVWDW5CiIj48Z8F2pYLllZR0+AuzEX0UX035mxIkLq0dhD 
w5vXL97fr503rfwQH3hPx4uuH57f2AL8BfPrVlrs6xwsAAAAASUV0RK5CYII=" /> 

El atributo src de la imagen del ejemplo anterior utiliza el esquema data: para incluir en la 
pagina los bytes de la imagen. El valor image/png indica que los datos corresponden a una 
imagen en formato PNG. El valor base64 indica que los datos incluidos estan codificados segun el 
formato base64. 

Aunque el ejemplo anterior funciona correctamente, como todos los datos se incluyen en el 
propio codigo HTML, el navegador no puede hacer uso de la cache para reutilizarlos 
posteriormente. El resultado es que el numero de peticiones HTTP se reduce drasticamente, 
pero aumenta significativamente el tamano de todas las paginas HTML. 

El siguiente paso consiste en utilizar las imagenes embebidas en las hojas de estilos CSS, de 
forma que se mantengan las ventajas del ejemplo anterior y se solucionen todas sus desventajas. 
Para embeber las imagenes en CSS se sigue la misma estrategia que en HTML, ya que solo es 
necesario sustituir la URL por el esquema data:, tal y como muestra el siguiente ejemplo: 

/* Imagen externa que eL navegador debe descargar desde eL servidor */ 

ul#menu li { background: #FFF no-repeat center center url("/imagenes/icono_libro.png"); 

} 

/* Imagen embebida que eL navegador puede mostrar directamente porque ya dispone de sus 
bytes */ 
ul#menu li { 

background: #FFF no-repeat center center url("data:image/png;base64 J iVBORw0KGgo 
AAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAAB10RVh0U29mdHdhcmUAQW 
RvYmUgSWlhZ2VSZWFkeXHJZTwAAAHjSURBVDjLdZ0/alVBEMZ/5+TemxAbFUUskqAoS0JNp4KC4AsoP 
oGFIHY+gA+jiDXaKIiChbETtBYLUbSMRf6Aydndmfks9kRjvHdhGVh2fvN9uzONDK7fe7Ai6algA3FZ 
CAmQqEF/dnihpKlv7x7dPw0woF64Izg3X15sln9uIe01QYUFCtjc+sVuEqHBKfpVAXBlvLzQXFtdYPH 
kGFUCoahVolY/fnie+bkBV27c5R8A0pHxyhKvPn5hY2MHRQAQeyokFGJze4cuZfav3gLNYDTg7Pklzp 
w4ijtIQYRwFx6BhdjtCk+erU0CCPfg+/o2o3ZI13WUlLGo58YMg+GIY4dmCWkCAAgPzAspDW5ePFPlV 
3VI4uHbz5S5IQfy/yooHngxzFser30iFcNcuAVGw3A0Ilt91IkAsyCXQg5QO0szHEIrogkiguwN2acC 
o3hjnZGKYx4Ujz5WOA2YDlBMU+BBSYVUvNpxkXuIuWgbsOxTHrG3UHIFWIhsgXtQQpTizNBS5jXZQkh 
kcywZqQQlAjdRwiml7wU5xWLaLlAvZa8WIjALzIRZ7YVWDW5CiIj48Z8F2pYLHZR0+AuzEX0UX035m 
xIkLq0dhDw5vXL97fr503rfwQHJhPx4uuH57f2AL8BfPrVlrs6xwsAAAAASUV0RK5CYII="); 

} 

La ventaja de utilizar las imagenes embebidas en CSS es que solo aumenta el tamano de las hojas 
de estilos y no el de todas las paginas HTML del sitio. Ademas, los navegadores guardan en su 
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cache las hojas de estilos completas, por lo que el aumento en su tamano no penaliza en exceso 
el rendimiento global de la descarga de paginas. 

El proceso de codificacion de los bytes de las imagenes segun el formato base64 es una tarea 
mas propia de programadores web que de disenadores web. Si conoces por ejemplo el lenguaje 
de programacion PHP puedes utilizar la siguiente instruccion: 

| $bytesCodificados = base64_encode(file_get_contents("/ruta/hasta/la/imagen.png")); 

Si no dispones de conocimientos de programacion, puedes utilizar alguna de las herramientas 
online que codifican directamente los contenidos del archivo indicado: 

■ Base64 encoder/decoder (http://www.motobit.com/util/base64-decoder-encoder.asp] 

■ Binary File to Base64 Encoder / Translator (http://www.greywyvern.com/code/php/ 
binary2base64) 

Las principales ventajas de la tecnica de las imagenes embebidas son las siguientes: 

■ Reduce drasticamente el numero de peticiones HTTP, lo que mejora notablemente el 
rendimiento. 

■ Permite guardar una pagina HTML completa en un unico archivo HTML (embebiendo 
todas sus imagenes en su hoja de estilos o en el propio codigo HTML). 

■ Mejora el rendimiento de las peticiones HTTPS en las que las imagenes no se guardan en la 
cache. 

Por contra, sus desventajas son considerables: 

■ El esquema data: solo funciona en los navegadores modernos que se preocupan de los 
estandares (Firefox, Safari y Opera). Internet Explorer 6 y 7 no son capaces de procesar el 
esquema data:. Internet Explorer 8 asegura que permitira utilizar data:, pero solamente 
para embeber imagenes en CSS. 

■ El proceso complete es lento y poco flexible, ya que es necesario codificar las imagenes en 
base64 y recodificarlas cada vez que se quieren modificar. 

■ Las imagenes embebidas aumentan considerablemente el tamano de la hoja de estilos CSS. 
Ademas, la codificacion base64 tambien aumenta mucho el tamano de los dates de la 
imagen respecto a sus bytes originales. 

* Los navegadores limitan el tamano maximo de los dates que se pueden embeber mediante 
data:. Algunos navegadores como Opera permiten unos 4.000 bytes de dates, mientras 
que el navegador Firefox permite hasta 100.000 bytes por cada data:. 

6.2. Mapas de imagen 

Los mapas de imagen se llevan utilizando desde los origenes de HTML. Combinando las 
etiquetas <map> y <area> junto con el atributo usemap de la etiqueta <img> es posible definir 
diferentes zonas pinchables dentro de una misma imagen. 
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Hoy en dfa los mapas de imagen HTML han sido sustituidos por otras soluciones como Flash, que 
son mas faciles de utilizar y disponen de mas posibilidades. No obstante, recientemente ha 
surgido un nuevo tipo de mapa de imagen creado solo con CSS. 

Estos mapas de imagen CSS no suelen utilizarse para definir zonas pinchables dentro de una 
imagen, sino que se emplean para mostrar information adicional y comentarios sobre las 
diferentes zonas de una imagen. El sitio de fotografia Flickr (http://www.flickr.com/) utiliza los 
mapas de imagen para mostrar notas y comentarios de los usuarios. Otros sitios web como 
Facebook (http://www.facebook.com/) utilizan los mapas de imagen para que los usuarios 
etiqueten las fotografias indicando el nombre de las personas que aparecen en cada una. 

A continuation se explican los pasos necesarios para crear un mapa de imagen exclusivamente 
con CSS similar a los de Flickr y Facebook. 

En primer lugar, selecciona la imagen en la que se van a mostrar las notas. En este ejemplo se 
utiliza una imagen de la fotografa visualpanic (http://www.flickr.com/photos/visualpanic/) que 
se puede utilizar libremente y que esta disponible en Flickr (http://www.flickr.com/photos/ 
visualpanic/233508614/): 



El funcionamiento del mapa de imagen terminado es el que muestra la siguiente secuencia de 
imagenes: 
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Figura 6.2. Funcionamiento del mapa de imagen creado con CSS 


La imagen por defecto no muestra ninguna zona activa. Cuando el usuario pasa el raton por 
encima de cualquier parte de la imagen, se muestra el recuadro de todas las zonas activas 
disponibles. Ademas, cuando el usuario pasa el raton por encima de una zona activa, se muestra 
el comentario asociado. 


El codigo HTML del mapa de imagen creado con CSS varia mucho en funcion de la solution 
utilizada. Aunque algunas soluciones crean varios <div> y tablas por cada nota/comentario, en 
este ejemplo se simplifica al maximo el codigo HTML y solo se utiliza un elemento <div> y una 
lista <ul>: 

<div class="mapa_imagen"> 

<img src="imagenes/mar.jpg" /> 

<ul class="notas"> 

<li id="notal"xp>Todo el mar es suyo :)</px/li> 

<li id="nota2"xp>jMe encanta este color azul!</px/li> 

<li id="nota3"xp>Dan ganas de tirarse... </px/li> 

</ul> 

</div> 

El elemento <div class="mapa_imagen"> encierra todos los elementos que forman el mapa de 
imagen (la imagen original y las notas/comentarios). Los comentarios se incluyen mediante una 
lista no ordenada <ul>, en la que cada elemento <li> es un comentario. 
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El elemento <div> y la lista <ul> deben utilizar el atributo class y no id porque en una misma 
pagina puede haber varios mapas de imagen. Por su parte, los elementos <li> de cada 
comentario deben utilizar atributos id, ya que cada comentario se muestra en una position 
unica y tiene unas dimensiones unicas de anchura y altura. 

La clave de los mapas de imagen CSS consiste en posicionar cada <li> de forma absoluta 
respecto de la imagen y asignarles una anchura/altura adecuadas. Posteriormente, se emplea la 
pseudo-clase : hover para mostrar/ocultar elementos cuando el usuario pasa el raton por 
encima. 

1) Posicionar de forma absoluta cada nota: 

div.mapa_imagen { 
position: relative 

} 

ul.notas li { 

position: absolute; 

} 

2) Aplicar los estilos basicos a las notas (borde bianco y sin adornos de lista): 

ul.notas li { 

border: medium solid #FFF; 
list-style: none; 

} 

3) Ocultar por defecto las notas y mostrarlas cuando se pasa el raton por encima de la imagen: 

ul.notas li { 
display: none; 

} 

div.mapa_imagen:hover ul.notas li { 
display: block; 

} 

4) Aplicar los estilos basicos al texto de las notas y posicionarlo debajo de cada nota: 

ul.notas li p { 

position: absolute; 
top: 100%; 

background: #FFF; 
opacity: 0.65; 

margin: 10px 000; 
padding: 0.3em; 

} 

5) Ocultar por defecto el texto de las notas y mostrarlo cuando se pasa el raton por encima de la 
nota: 

ul.notas li p { 
display: none; 

} 

ul.notas li:hover p { 
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I display: block; 

| } 

6) Establecer la position y dimensiones de cada nota: 

ul.notas li#notal { 

width: 140px; height: 110px; top: 130px; left: 345px; 

} 

ul.notas li#nota2 { 

width: 30px; height: 200px; top: 10px; left: 10px; 

} 

ul.notas li#nota3 { 

width: 60px; height: 60px; top: 200px; left: 150px; 

} 

Aplicando las reglas CSS anteriores el mapa de imagen CSS ya funciona correctamente en los 
navegadores Firefox y Safari. Desafortunadamente, los navegadores Internet Explorer y Opera 
tienen errores que impiden que el ejemplo funcione correctamente. El problema reside en que 
los elementos <li> tienen un fondo transparente y tanto Internet Explorer como Opera tienen 
problemas con la pseudo-clase : hover sobre estos elementos. 

La solution consiste en anadir un fondo (color o imagen) sobre los elementos <li>. Como lo 
unico importante es anadir un fondo, independientemente de si el fondo es real o no, la siguiente 
regia CSS es suficiente: 
ul.notas li { 

background: url("esta_imagen_no_existe"); 

} 

El codigo CSS completo del mapa de imagen que funciona en todos los navegadores es el 
siguiente: 

div.mapa_imagen { 
position: relative 

} 

ul.notas li { 

list-style: none; 

display: none; 

position: absolute; 

border: medium solid white; 

background: url("esta_imagen_no_existe"); 

} 

div.mapa_imagen:hover ul.notas li { 
display: block; 

} 

ul.notas li p { 

margin: 10px 000; 
padding: .3em; 
display: none; 
background: #FFF; 
opacity: 0.65; 
position: absolute; 
top: 100%; 

} 

ul.notas li:hover p { 
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display: block; 

} 

ul.notas li#notal { 

width: 140px; height: 110px; top: 130px; left: 345px; 

} 

ul.notas li#nota2 { 

width: 30px; height: 200px; top: 10px; left: 10px; 

} 

ul.notas li#nota3 { 

width: 60px; height: 60px; top: 200px; left: 150px; 

} 


El resultado final es el que muestra la siguiente imagen: 



Figura 6.3. Mapa de imagen con todas sus zonas activadas 


6.3. Variables en las hojas de estilos 

La mayoria de disenadores web profesionales creen que CSS carece de un mecanismo 
fundamental para facilitar su trabajo: las variables en las hojas de estilos. Cuando se define una 
hoja de estilos como la siguiente: 

#cabecera { 

background-color: #369; 
color: #FFF; 

} 
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#contenidos hi, #contenidos h2 { 
color: #369; 

} 

a { 

color: #557E29; 

} 

span { 

background-color: #557E29; 

} 

Los buenos disenadores utilizan en sus trabajos un numero muy reducido de colores que 
combinan entre si para disenar cada elemento de la pagina. De esta forma, en las hojas de estilos 
profesionales se repiten una y otra vez los mismos valores. No obstante, CSS no permite definir 
variables para almacenar los valores que se utilizan constantemente. 

Si el disenador quiere modificar el color verde #557E29 de la hoja de estilos anterior, ^como 
cambia todas las apariciones de ese color verde en la hoja de estilos? Modificar ese color de 
forma manual es un proceso tedioso y demasiado lento. Afortunadamente, los editores de texto 
disponen de herramientas para sustituir un valor por otro, aunque tampoco es una solucion 
optima. 

Por otra parte, tambien es comun disenar sitios web identicos o muy similares en los que solo 
cambia su aspecto definido con CSS. En este caso, es habitual que un sitio web se diferencie de 
otro solamente en algunos pocos valores de su hoja de estilos CSS. La solucion consiste 
nuevamente en modificar todos los valores de colores y tipos de letra para modificar el aspecto 
del sitio web. 

Los problemas anteriores se podrian resolver facilmente si CSS permitiera definir variables 
como en la siguiente hoja de estilos: 

$colorAzul = #369; 

$colorVerde = #557E29; 

#cabecera { 

background-color: $colorAzul; 
color: #FFF; 

} 

#contenidos hi, Scontenidos h2 { 
color: $colorAzul; 

} 

a { 

color: $colorVerde; 

} 

span { 

background-color: $colorVerde; 

} 

En la hoja de estilos anterior, el disenador puede cambiar el tono de verde o de azul haciendo un 
solo cambio en la hoja de estilos y con la seguridad absoluta de que se modifican todos los 
elementos de la pagina y no se comete ningun error. 
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No obstante, si la hoja de estilos anterior se quiere reutilizar para otros disenos con colores 
completamente diferentes, el nombre de las variables anteriores no seria correcto. Por ello, lo 
mas correcto seria crear variables cuyo nombre no incluya information sobre su aspecto: 

$colorPrincipal = #369; 

$colorSecundario = #557E29; 

#cabecera { 

background-color: $colorPrincipal; 
color: #FFF; 

} 

#contenidos hi, #contenidos h2 { 
color: $colorPrlncipal; 

} 

a { 

color: $colorSecundario; 

} 

span { 

background-color: $colorSecundario; 

} 

Lamentablemente, CSS no permite utilizar variables en las hojas de estilos. Por este motivo se 
han desarrollado varias soluciones que hacen uso del servidor web y de los lenguajes de 
programacion de servidor para incluir variables en las hojas de estilos CSS. 

La solution mas sencilla consiste en utilizar el mecanismo SSI ( Server Side Includes) de los 
servidores web Apache y Microsoft IIS. A continuation se muestra el proceso completo para el 
servidor web Apache 2.2: 

1) Modificar el archivo de configuracion de Apache: dependiendo de tu instalacion puede ser el 
archivo general de configuracion httpd. conf o el archivo de configuracion . htaccess 

En cualquier caso, es necesario anadir las siguientes opciones de configuracion: 

Options +Includes 
AddType text/css .scss 
AddOutputFilter INCLUDES .scss 

La configuracion anterior le indica al servidor web que los archivos cuya extension sea .scss 
son archivos CSS de servidor y que por tanto, se deben procesar antes de enviarlos al usuario. 

Para que los cambios en la configuracion sean efectivos, no olvides reiniciar el servidor web. 

2) Crear la hoja de estilos y guardar el archivo con extension .scss 

3) Anadir las variables a la hoja de estilos utilizando la siguiente sintaxis: 

Para definir la variable: 

| <!--#set var="nombre_de_la_variable" value="valor_de_la_variable" --> 

Para utilizar la variable 

| <!--#echo var="nombre_de_la_variable" --> 
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Siguiendo con la hoja de estilos de los ejemplos anteriores, el resultado es el que se muestra a 
continuacion: 

<!--#set var="colorPnincipal" value="#369" --> 

<!--#set var="colorSecundario" value="#557E29" --> 

#cabecera { 

background-colon: <!--#echo var="colorPrinclpal" 
color: #FFF; 

} 

#contenidos hi, #contenidos h2 { 

color: <!--#echo var="colorPrinclpal" 

} 

a { 

color: <!--#echo var="colorSecundarlo" 

} 

span { 

background-color: <!--#echo var="colorSecundario" -->; 

} 

Si no se quiere utilizar otra extension para los archivos CSS procesados por el servidor, es 
posible hacer uso de la directiva XBitHack, tal y como se explica en la documentation oficial de 
Apache 2.2 sobre SSI (http://httpd.apache.Org/docs/2.2/howto/ssi.html] . 

6.3.1. Lenguajes de programacion de servidor 

La solucion alternativa al uso de las directivas SSI del servidor web consiste en emplear un 
lenguaje de programacion de servidor. Aunque se trata de una tecnica diferente, tambien se basa 
en procesar las hojas de estilos en el servidor antes de enviarlas al usuario. 

Los detalles tecnicos de la solucion dependen del lenguaje de programacion utilizado, pero el 
mecanismo que se utiliza es identico en todos los casos. A continuacion se muestra un ejemplo 
que hace uso del lenguaje de programacion PHP. 

Para incluir variables en las hojas de estilos CSS, se crea un archivo con extension .php y se 
utiliza la sintaxis que se muestra en el siguiente ejemplo: 

<?php 

header('content-type:text/css'); 

$nombre_variablel = 'valor_variablel'; 

$nombre_variable2 = 'valor_variable2'; 

echo «<FINCSS 
selector { 

propiedadl: $nombre_variablel; 
propiedad2: $nombre_variable2; 

} 

FINCSSj 

?> 

Siguiendo con la hoja de estilos de los ejemplos anteriores, el archivo PHP complete es el 
siguiente: 
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<?php 

header('content-type:text/css '); 

$colorPrincipal = '#369'; 

$colorSecundario = '#557E29'; 

echo «<FINCSS 
#cabecera { 

background-color: $colorPrincipal; 
color: #FFF; 

} 

#conteni.dos hlj #contenidos h2 { 
color: $colorPrincipal; 

} 

a { 

color: $colorSecundario; 

} 

span { 

background-color: $colorSecundario; 

} 

FINCSS; 

?> 

Por ultimo, cuando enlaces la hoja de estilos generada con este metodo, no olvides utilizar la 
extension . php en el nombre del archivo de la hoja de estilos: 

| <link type="text/css" rel="stylesheet" href="/css/estilos.php" /> 

6.3.2. CSS como lenguaje de programacion 

Las soluciones que permiten utilizar variables en las hojas de estilos han evolucionado de tal 
manera que alguna de ellas permite utilizar CSS como si fuera un lenguaje de programacion. Una 
de estas soluciones es CSS Cacheer (http://www.shauninman.com/archive/2008/05/30/ 
check_out_css_cacheer), ideada por el disenador Shaun Inman. 

En primer lugar, CSS Cacheer permite utilizar variables en las hojas de estilos, aunque en esta 
solution se denominan "constantes": 

§constants { 

nombre_de_la_constante: valor_de_la_constante; 

} 

selector { 

propiedad: const(nombre_de_la_constante); 

} 

CSS Cacheer tambien permite definir unos estilos base que se reutilizan en diferentes elementos: 

@base(tipografia_basica) { 

font-family: Arial, sans-serif; 
line-height: 1.5; 

} 

P { 

based-on: base(tipografia_basica); 
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font-size: 110%j 

} 

hi { 

based-on: base(tipografia_basica)j 
font-size: 200%j 

} 

CSS Cacheer es tan avanzado que permite incluso anidar selectores como se muestra en el 
siguiente ejemplo: 
ul { 

pnopiedadl: valorl; 

li { 

propiedad2: valor2; 

} 

} 

Si se procesan las reglas CSS anteriores con CSS Cacheer, el resultado es el siguiente: 
ul { 

pnopiedadl: valorl; 

} 

ul li { 

propiedad2: valor2; 

} 


6.4. Estilos alternatives 

La mayoria de sitios web disponen de una o varias hojas de estilos CSS que se aplican 
automaticamente al cargar cada pagina en el navegador. En realidad, el estandar HTML/XHTML 
permite definir varias hojas de estilos CSS alternativas en una misma pagina. 

De esta forma, el usuario puede seleccionar el estilo con el que se muestra la pagina entre una 
serie de estilos definidos por el disenador web. En ocasiones los estilos alternatives se emplean 
por pura estetica, por ejemplo para ofrecer temas y esquemas de colores diferentes en un sitio 
web. Sin embargo, el uso mas adecuado de los estilos alternatives es la mejora de la accesibilidad 
ofreciendo hojas de estilos que faciliten el acceso a los contenidos para las personas 
discapacitadas. 

Las hojas de estilos CSS que se enlazan en una pagina HTML mediante la etiqueta <link> pueden 
ser de tres tipos: 

■ Permanentes ["persistent"): las hojas de estilos que se aplican siempre. 

■ Preferentes ["preferred"): las hojas de estilos alternativas que se aplican por defecto. 

■ Alternativas ["alternate"): las hojas de estilos alternativas que el usuario puede 
seleccionar. 

Las hojas de estilos permanentes se aplican siempre independientemente del resto de hojas de 
estilos definidas o de la hoja de estilo alternativa utilizada por el usuario. Para indicar que una 
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hoja de estilos CSS es permanente, se utiliza el atributo rel="stylesheet" y no se establece el 
atributo title en la etiqueta <link>: 

I <link rel="stylesheet" type="text/css" href="css/estilos.css" /> 

<link rel="stylesheet" type="text/css" href="css/otros_estilos.css" /> 

En el ejemplo anterior, las dos hojas de estilos CSS se aplican siempre independientemente del 
medio y de otras posibles hojas de estilos definidas por la pagina. 

Las hojas de estilos preferentes son las hojas de estilos alternativas que se aplican por defecto. 
Por lo tanto, si el usuario no selecciona explicitamente otra CSS alternativa, en la pagina tambien 
se aplican las hojas de estilos preferentes. Para indicar que una hoja de estilos CSS es preferente, 
se utiliza el atributo rel="stylesheet" y se establece el atributo title en la etiqueta <link>: 

I <link nel="stylesheet" title="Estilo alternative)" type="text/css" href="css/ 

| estilos.css" /> 

La hoja de estilos enlazada en el ejemplo anterior se aplica en la pagina siempre que el usuario 
no seleccione otra hoja de estilos alternativa. El estandar HTML/XHTML permite crear grupos de 
hojas de estilos preferentes. Si dos o mas hojas de estilos enlazadas tienen el mismo ti'tulo, el 
navegador considera que forman parte de un grupo y las aplica de forma conjunta: 

clink rel="stylesheet" title="Estilo alternative" type="text/css" href="css/ 
estilosl.css" /> 

clink rel="stylesheet" title="Estilo alternative" type="text/css" href="css/ 
estilos2.css" /> 

Las etiquetas clink> del ejemplo anterior enlazan dos hojas de estilos diferentes con el mismo 
valor en su atributo title, por lo que el navegador considera que forman un grupo. Como se 
trata de hojas de estilos preferentes (porque tienen un atributo rel="stylesheet" y un atributo 
title no vacio) el navegador aplica todas las hojas de estilos del grupo a no ser que el usuario 
seleccione explicitamente otra hoja de estilos alternativa. 

El siguiente ejemplo incluye hojas de estilos permanentes y preferentes: 

clink rel="stylesheet" type="text/css" href="css/estilosl.css" /> 
clink rel="stylesheet" type="text/css" href="css/estilos2.css" /> 
clink rel="stylesheet" title="Estilo alternative)" type="text/css" href="css/ 
estilos3.css" /> 

clink rel="stylesheet" title="Estilo alternative)" type="text/css" href="css/ 
estilos4.css" /> 

Las dos primeras hojas de estilos del ejemplo anterior son de tipo permanente, por lo que el 
navegador las aplica siempre. Las otras dos hojas de estilos son de tipo preferente, por lo que el 
navegador tambien las aplica a menos que el usuario seleccione otras hojas de estilo 
alternativas. 

El ultimo tipo de hojas de estilos son las alternativas, que solo se aplican si el usuario las 
selecciona explicitamente. Para indicar que una hoja de estilos CSS es alternativa, se utiliza el 
atributo rel=”alternate stylesheet" y se establece el atributo title en la etiqueta clink>: 

I clink rel="alternate stylesheet" title="Estilo alternative)" type="text/css" href="css/ 
estilos.css" /> 
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La hoja de estilos del ejemplo anterior no se aplica en la pagina a menos que el usuario la 
seleccione entre todas las hojas de estilos alternativas. Esta caracteristica no esta disponible en 
todos los navegadores, por lo que los disenadores no deben suponer que el usuario podra 
utilizarla. 


En los navegadores como Firefox y Opera, cuando una pagina dispone de varias hojas de estilos 
alternativas, el usuario puede acceder a todas ellas y seleccionar la que desee a traves del menu 
Ver > EstilooVer > Estilo de pagina. 


Si se considera una pagina HTML que enlaza las siete hojas de estilos siguientes: 


<link rel="stylesheet" type="text/css" href="css/estilosl.css" /> 
<link rel="stylesheet" type="text/css" href="css/estilos2.css" /> 
<link rel="stylesheet" title="Estilo alternative 1" type="text/css" 
estilos3.css" /> 

<link rel="stylesheet" title="Estilo alternative 1" type="text/css" 
estilos4.css" /> 

<link rel="stylesheet" title="Estilo alternative 2" type="text/css" 
estilosS.css" /> 

<link rel="stylesheet" title="Estilo alternative 2" type="text/css" 
estilos6.css" /> 

<link rel="stylesheet" title="Estilo alternative 3" type="text/css" 
estilos7.css" /> 


href="css/ 

href="css/ 

href="css/ 

href="css/ 

href="css/ 


Inicialmente, las hojas de estilos que se aplican en la pagina son: 


■ Las dos primeras hojas de estilos (estilosl.css y estilos2.css) por ser de tipo 
permanente y que por tanto, se aplican bajo cualquier circunstancia. 

■ Las dos siguientes hojas de estilos (estilos3.css yestilos4.css) por ser de tipo 
preferente y que por tanto, se aplican siempre que el usuario no seleccione explicitamente 
otro tipo de hoja de estilos alternativa. 

Si el usuario utiliza un navegador avanzado (Firefox, Opera) y pulsa sobre el menu Ver > 
Estilo, se muestran las siguientes opciones: 


Estilo alternative 1, seleccionado por defecto y que hace que se apliquen las hojas de 
estilos estilos3. css y estilos4. css y se dejen de aplicar el resto de hojas de estilos 
alternativas. 

Estilo alternative 2, que hace que se apliquen las hojas de estilos estilos5. css y 
estilos6. css y se dejen de aplicar el resto de hojas de estilos alternativas, incluyendo las 
hojas de estilos preferentes estilos3. css y estilos4. css. 

Estilo alternative 3, que hace que se aplique la hoja de estilos estilos7. css y se dejen 
de aplicar el resto de hojas de estilos alternativas, incluyendo las hojas de estilos 
preferentes estilos3.css y estilos4.css. 


Por ultimo, recuerda que independientemente del tipo de hoja de estilos enlazada, los 
navegadores tambien tienen en cuenta los medios (atributo media) al aplicar cada hoja de estilos 
en cada dispositivo con el que accede el usuario. 
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6.5. Comentarios condicionales, filtros y hacks 

6.5.1. Comentarios condicionales 

En ocasiones, cuando se disena un sitio web, es preciso aplicar diferentes reglas y estilos en 
funcion del navegador. De esta forma, se pueden corregir los errores y limitaciones de un 
navegador sin afectar al resto de navegadores. 

Microsoft introdujo en su navegador Internet Explorer 5 un mecanismo llamado "comentarios 
condicionales", que todavia incluyen las versiones mas recientes como Internet Explorer 8, y que 
permite aplicar diferentes estilos CSS segun la version del navegador. 

La sintaxis de los comentarios condicionales se basa en la de los comentarios normales de HTML: 
<!-- Comentario normal de HTML --> 

<!--[if expresion]> Comentario condlcional <![endif]--> 

La sintaxis de los comentarios condicionales permite que su contenido se ignore en cualquier 
navegador que no sea de la familia Internet Explorer. 

Las expresiones se crean combinando identificadores, operadores y valores. El unico 
identificador definido es IE, que permite crear el comentario condicional mas simple: 

<J —[if ie]> 

Este navegador es cualquier version de Internet Explorer 
<![endif]--> 

El operador mas sencillo definido por los comentarios condicionales es el operador de negation 
(!), que se indica delante de una expresion para obtener el resultado contrario: 

<J —[if !ie]> 

Este navegador es cualquiera salvo Internet Explorer 
<![endif]--> 

Si se quiere restringir el alcance del comentario condicional a una unica version de Internet 
Explorer, se puede indicar directamente el numero de la version: 

<!--[if IE 5.5]> 

Este navegador es Internet Explorer 5.5 
<![endif]--> 

<!--[if IE 6]> 

Este navegador es Internet Explorer 6 
<![endif]--> 

<!--[if IE 8]> 

Este navegador es Internet Explorer 8 
<![endif]--> 

Ademas de las versiones especificas, tambien es posible restringir los comentarios condicionales 
a un grupo de versiones de Internet Explorer mediante los operadores "menor que" (It), "mayor 
que" (gt), "menor o igual que" (lte), "mayor o igual que" (gte). 
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<!- -[if It IE 7]> 

Este navegador es cualquier version anterior a Internet Explorer 7 
<![endif]--> 

<!- -[if lte IE 6]> 

Este navegador es Internet Explorer 6 o cualquier version anterior 
<![endif]--> 

<!- -[if gt IE 7 ]> 

Este navegador es cualquier version mas reciente que Internet Explorer 7 
<![endif]--> 

<!- -[if gte IE 8]> 

Este navegador es Internet Explorer 8 o cualquier version mas reciente 
<![endif]--> 

Por ultimo, tambien se pueden utilizar otros operadores mas complejos similares a los que se 
pueden encontrar en los lenguajes de programacion. El operador AND (&) combina dos 
expresiones para crear una condition que solo se cumple si se cumplen las dos expresiones. El 
operador OR [ |) tambien combina dos expresiones y crea condiciones que se cumplen cuando al 
menos una de las dos expresiones se cumple. Tambien se pueden utilizar parentesis para crear 
expresiones avanzadas: 

<!- -[if !(IE 7) ] > 

Este navegador es cualquier version diferente a Internet Explorer 7 
<1[endif]--> 

<!- -[if (IE 7) | (IE 8)]> 

Este navegador es Internet Explorer 7 o Internet Explorer 8 
<![endif]--> 

<! - - [if (gt IE 5) & ! (IE 8) ] > 

Este navegador es cualquier version mas reciente que Internet Explorer 5 pero que no 
sea Internet Explorer 8 
<![endif]--> 

<!--[if (gte IE 5) & (It IE 8)]> 

Este navegador es Internet Explorer 5 o cualquier version mas reciente que sea 
anterior a Internet Explorer 8 
<![endif]--> 

Las principales ventajas de los comentarios condicionales son: 

■ Compatibilidad con cualquier navegador, ya que el resto de navegadores consideran que 
los comentarios condicionales son comentarios normales de HTML e ignoran su contenido. 

■ No requiere el uso de lenguajes de programacion como JavaScript, aunque se puede 
combinar con este tipo de tecnicas para detectar dinamicamente el tipo y version de 
navegador. 


Nota 

Basandose en la idea de los comentarios condicionales, se ha desarrollado una tecnica que permite crear 
hojas de estilos condicionales que aplican diferentes propiedades en funcion de la version del navegador. 
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Esta tecnica se denomina Conditional CSS (http://www.conditional-css.com/) y requiere procesar las hojas 
de estilos en el servidor antes de servirlas a los usuarios. Los lenguajes de programacion de servidor 
soportados son PHP, C y C++. 


6.5.2. Filtros y hacks 

Los filtros y hacks es otra de las tecnicas disponibles para aplicar diferentes estilos y reglas CSS 
en funcion del navegador que visualiza los contenidos. A1 contrario que los comentarios 
condicionales, los filtros y hacks constituyen una forma poco elegante y tecnica de solucionar 
este problema. 

La idea de los filtros y hacks consiste en aprovechar los errores y carencias de los navegadores 
para ocultar los estilos CSS que no se deben aplicar en ese navegador. El siguiente ejemplo 
muestra uno de los hacks mas antiguos y conocidos que aprovecha un error en las versiones 
obsoletas de Internet Explorer: 

#elemento { 
width: 300px; 
voice-family: 
voice-family: inherit; 
width: 250px; 

} 

html > body #elemento { 
width: 300px; 

} 

Internet Explorer 5 y 5.5 no interpretan correctamente el modelo de cajas de CSS, por lo que no 
muestran los elementos con la misma anchura que el resto de navegadores. Si se quiere realizar 
un diseno con el mismo aspecto en cualquier navegador, es preciso utilizar propiedades 
diferentes para Internet Explorer 5/5.5 y el resto de navegadores. 

Entre los muchos errores de Internet Explorer 5/5.5 se encuentra la imposibilidad de procesar 
correctamente la declaration voice-family: Por tanto, las reglas CSS anteriores se 

interpretan de la siguiente forma en cada navegador: 

/* Internet ExpLorer 5/5.5 */ 

#elemento { 
width: 300px; 

} 

/* Internet ExpLorer 6 */ 

#elemento { 
width: 300px; 
width: 250px; 

} 

/* Resto de navegadores */ 

#elemento { 
width: 300px; 
width: 250px; 

} 
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html > body #elemento { 
width: 250px; 

} 

El resultado final del hack anterior es que Internet Explorer 5/5.5 aplica un valor de 300px a la 
propiedad width y el resto de navegadores aplican un valor de 250px. Si se tienen en cuenta los 
margenes, hordes y rellenos, el elemento se muestra con el mismo aspecto en cualquier 
navegador. 

Algunos filtros y hacks son mucho mas sencillos que el mostrado anteriormente. De hecho, 
existen tres filtros muy simples que se utilizan para aplicar diferentes estilos a cada version de 
Internet Explorer. El primer filtro es * html, que aplica las reglas CSS a las versiones de Internet 
Explorer anteriores a la 7: 

P { 

color: red; 

} 

* html p { 
color: blue; 

} 

Si se anade * html delante del selector de cualquier regia CSS, esa regia solo se aplica a los 
navegadores de la familia Internet Explorer anteriores a la version 7. De esta forma, en el 
ejemplo anterior los parrafos de la pagina se muestran de color azul en los navegadores Internet 
Explorer 5, 5.5 y 6, mientras que se muestran de color rojo en el resto de navegadores. 

Otro de los hacks mas utilizados es _ (guion bajo) que hace que una propiedad solo se aplique a 
los navegadores de la familia Internet Explorer anteriores a la version 7: 

P { 

color: red; 

_color: blue; 

} 

La regia CSS anterior muestra los parrafos de la pagina de color rojo en cualquier navegador 
salvo en los navegadores Internet Explorer 5, 5.5 y 6, donde se muestran de color azul. 

Por ultimo, tambien existe el hack * (asterisco) que hace que una propiedad solo se aplique en 
los navegadores de la familia Internet Explorer anteriores a la version 8: 

P { 

color: red; 

*color: blue; 

} 

En el ejemplo anterior, los parrafos de la pagina se muestran de color azul en cualquier 
navegador de la familia Internet Explorer cuya version sea anterior a la 8 y se muestran de color 
rojo en cualquier otro navegador. 

Se puede consultar la lista completa de filtros y hacks para cada navegador y cada version en el 
sitio web http://centricle.com/ref/css/filters/ 
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El uso de los filtros y hacks siempre debe considerarse como el ultimo recurso para conseguir 
que los disenos tengan el mismo aspecto en cualquier navegador. Como los filtros y hacks se 
basan en aprovechar errores de los navegadores, su principal problema es que no garantizan su 
funcionamiento con las versiones mas modernas de los navegadores. Ademas, los filtros y hacks 
complican el codigo CSS y lo hacen mas dificil de leer y de mantener. 

La mejor alternativa a los filtros y hacks es el uso de comentarios condicionales. Si no es posible 
el uso de comentarios condicionales, es preferible que el diseno de la pagina muestre ligeras 
diferencias visuales en cada navegador. 

Afortunadamente, la importancia de los filtros y hacks es cada vez menor, ya que todos los 
navegadores modernos solucionan los graves errores de sus versiones anteriores e introducen 
menos errores nuevos. 

6.6. Selector de navegador 

Los selectores de navegador permiten aplicar reglas CSS a navegadores especificos. Aunque se 
trata de una idea similar a los comentarios condicionales, su gran ventaja es que funcionan en 
cualquier navegador y que no se limitan a seleccionar solamente el navegador. 

El siguiente ejemplo muestra como aplicar diferentes reglas CSS en funcion del navegador 
utilizando los selectores de navegador: 

.ie p { ... } /* estiLos de Los pdrrafos en Internet ExpLorer */ 

.ie6 p { ... } /* estiLos de Los pdrrafos en Internet ExpLorer 6 */ 

.ff3 p { ... } /* estiLos de Los pdrrafos en Firefox 3 */ 

Como CSS no incluye por defecto los selectores de navegador, se debe recurrir a soluciones 
basadas en el lenguaje de programacion JavaScript. Una de estas soluciones ha sido creada por el 
disenador Rafael Lima y se denomina CSS Browser Selector (http://rafael.adm.br/ 
css_browser_selector/J. 

La solution de CSS Browser Selector consiste en ejecutar un pequeno codigo JavaScript cuando se 
carga la pagina de forma que se anada una clase en el elemento <html> en funcion del navegador 
utilizado por el usuario. 

El primer paso consiste en anadir el siguiente codigo JavaScript en la section <head> de la 
pagina: 

<head> 

<script type="text/javascript"> 

/* 

CSS Browser SeLector V0.2.7 
RafaeL Lima (http://rafaeL.adm.br) 
http://rafaeL.adm.br/css_browser_seLector 
License: http://creativecommons.org/Licenses/by/2. 5/ 

Contributors: http://rafaeL.adm.br/css_browser_seLector#contributors 

V 

var css_browser_selector = functionQ { 
var ua=navigator.userAgent.toLowerCase(), 
is=function(t){return ua.indexOf(t) != -1;}, 


www.librosweb.es 


149 



CSS avanzado 


Capitulo 6. Tecnicas avanzadas 


h=document.getElementsByTagName('html')[0], 

b=(!(/opera|webtv/i.test(ua))&&/msie (\d)/.test(ua))?('ie ie'+RegExp.$l):is('firefox/ 

2')?'gecko ff2':is('firefox/3')?'gecko ff3':is('gecko/')?'gecko':is('opera/9')?'opera 
opera9':/opera (\d)/.test(ua)?'opera 

opera'+RegExp.$l:is('konqueror')?'konqueror':is('applewebkit/')?'webkit 
safari':is('mozilla/')?'gecko':' ', 

os=(is('xll')||is('linux'))?' linux':is('mac')?' mac':is('win')?' win':''; 
var c=b+os+' js'; h.className += h.className?' '+c:c; 

}(); 

</script> 

</head> 

Una vez anadido el codigo anterior, cada vez que un usuario accede a la pagina se anade una 
clase al elemento <html> que indica el navegador y sistema operativo utilizados: 

/* navegador Firefox3, sistema operativo Windows, JavaScript habilitado */ 

<html class="gecko ff3 win js" ...> 

/* navegador Internet Explorer, sistema operativo Windows, JavaScript habilitado */ 

<html class="ie ie8 win js" ...> 

/* navegador Firefox 3, sistema operativo Linux, JavaScript habilitado */ 

<html class="gecko ff3 linux js" ...> 

Las siguientes tablas muestran las clases que anade CSS Browser Selector en funcion del 
navegador y sistema operativo: 


Clase 

Sistema Operativo 

win 

Cualquier version de Windows 

linux 

Cualquier version y/o distribution de Linux 

mac 

Cualquier version de Mac OS 


Clase 

Navegador 

ie 

Cualquier version de Internet Explorer 

ie5 

Internet Explorer 5 

ie6 

Internet Explorer 6 

ie7 

Internet Explorer 7 

ie8 

Internet Explorer 8 

gecko 

Cualquier version de Mozilla, Firefox y Camino 

ff 2 

Firefox 2 

ff 3 

Firefox 3 

opera 

Cualquier version de Opera 

opera8 

Opera 8 

opera9 

Opera 9 

konqueror 

Cualquier version de Konqueror 
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webkit 

safari 


Cualquier version de Safari y Shiira 


Ademas, tambien se anade la clase js cuando el navegador tiene activado el soporte de 
JavaScript. 

Como todos los valores anteriores se anaden como clase de <html>, en los navegadores que 
soportan correctamente los estandares es posible combinar varias clases para restringir aun 
mas el alcance del selector: 

/* estiLos de Los pdrrafos en Firefox 3 de Windows */ 

.ff3.win p { ... } 

/* estiLos de Los pdrrafos en Firefox 3 de Linux */ 

.ff3.1inux p { ... } 

/* estiLos de Los pdrrafos en Firefox 3 de Mac OS */ 

.ff3.mac p { ... } 

La version mas reciente de CSS Browser Selector se puede obtener a traves del repositorio 
http://github.com/rafaelp/css_browser_selector/ donde tambien se encuentra una version 
comprimida para mejorar ligeramente el rendimiento. 


www.librosweb.es 


151 




